Question

我有一个奇怪的问题。

我使用的是普通的ng新应用。在此应用中，我运行以下代码：

getChildComponent(type: string, apiUrl: string) { 
    type = 'grid-element';
    this.appendCustomElement(type, '../assets/main.js', document.getElementById('ElementBox'), apiUrl);
}


private appendCustomElement(name: string, url: string, target: HTMLElement, apiUrl: string) {


    if (!customElements.get(name)) {    
        console.log('define element');
        var script = document.createElement("script");

        script.src = url;
        document.head.appendChild(script);
    } 

    const component = document.createElement(name);

    component.setAttribute('apiurl', apiUrl);

    target.innerHTML = '';
    target.appendChild(component);
}

我创建两个元素。第一个Element从我的子组件加载main.js。该js文件包含完整的组件脚本。

第二个元素创建html标签并将其放入DOM。

我通过click事件启动getChildComponent（）。很好子组件将完全加载。我的问题是，如果我再次加载该组件。最初，脚本运行良好。 -很棒的HTML标签 -它运行子组件中的功能 -在子组件中获取所有结果

但是它不会重新加载html中的变量和数组。简单的例子：我在子组件中创建一个变量测试：string ='';并通过{{test}}在HTML中显示。测试用ngOnInit和一个订阅者填充。

ngOnInit() {
        this.test = 'blubb1';

        this.getApiResult();
    }



    async getApiResult() {
        const result = this.httpClient.get<any[]>(this.apiurl);


        result.subscribe(res => {

            this.test = 'blubb2';
        });
    }

第一次创建Elements时，HTML中的blubb2。在第二次运行是blubb1。因为订阅后的所有代码都不再更改。

对于Info，我尝试使用具有1000ms延迟的TimeOut函数，并且存在相同的问题。因此，这不是订阅，而是时间问题。...

所以我希望它是可以理解的，并请任何人有一个好主意，因为一个不能理解的^^

角度：createElement后绑定不起作用

0 个答案: