Javascript Angular 2 将组件动态附加到 DOM 或模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34855718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 append Component dynamic to DOM or template
提问by user3369579
I'm planning to add a component dynamic to the DOM if show() is called. I know there is a solution with ngIf or [hidden] to hide it and use it as a directive, but I'm not a fan of this solution because I don't want to declare it in my HTML.
如果调用 show()，我打算向 DOM 添加一个动态组件。我知道有一个使用 ngIf 或 [hidden] 的解决方案来隐藏它并将其用作指令，但我不喜欢这个解决方案，因为我不想在我的 HTML 中声明它。
import {Component} from 'angular2/core';
import {InfoData} from '../../model/InfoData';
@Component({
selector: 'Info',
templateUrl: './components/pipes&parts/info.html',
styleUrls: ['./components/pipes&parts/info.css']
})
export class Info{
infoData: InfoData;
public show(infoData: InfoData) {
this.infoData= infoData;
document.body.appendChild(elemDiv); <----- Here?
}
}
and then I declare this as a Provider so i can call show().
然后我将其声明为提供者，以便我可以调用 show()。
import {Component} from 'angular2/core';
import {Info} from './components/pipes&parts/Info';
@Component({
selector: 'Admin',
templateUrl: './Admin.html',
styleUrls: ['./Admin.css'],
directives: [Info],
providers: [Info]
})
export class Admin {
constructor(private info: Info) {
info.show(); <---- append the Info Element to DOM
}
采纳答案by Thierry Templier
I don't think that you need to provide the Infocomponent as providers to the other component. I'm not sure that it even works. You can leverage Queryand QueryViewto reference components used in another one:
我认为您不需要将该Info组件作为其他组件的提供者提供。我不确定它是否有效。您可以利用Query和QueryView引用另一个组件中使用的组件：
@Component({
selector: 'Admin',
templateUrl: './Admin.html',
styleUrls: ['./Admin.css'],
directives: [Info]
})
export class Admin{
constructor(private @Query(Info) info: QueryList<Info>) {
info.first().show(); <---- append the Info Element to DOM
}
}
Instead of adding the element within the Infocomponent, you can dynamically add this component using the DynamicComponentLoaderas suggested by Günter:
Info您可以使用DynamicComponentLoaderGünter 的建议动态添加此组件，而不是在组件中添加元素：
@Component({
selector: 'Info',
templateUrl: './components/pipes&parts/info.html',
styleUrls: ['./components/pipes&parts/info.css']
})
export class Info{
infoData: InfoData;
public show(infoData: InfoData) {
this.infoData= infoData;
// No need to add the element dynamically
// It's now part of the component template
// document.body.appendChild(elemDiv); <----- Here?
}
}
@Component({
selector: 'Admin',
//templateUrl: './Admin.html',
// To show where the info element will be added
template: `
<div #dynamicChild>
<!-- Info component will be added here -->
</div>
`,
styleUrls: ['./Admin.css'],
directives: [Info]
})
export class Admin{
constructor(private dcl: DynamicComponentLoader, private eltRef:ElementRef) {
this._dcl.loadIntoLocation(Info, this._el, 'dynamicChild')
.then(function(el) {
// Instance of the newly added component
});
}
}
Hope it helps you, Thierry
希望对你有帮助，蒂埃里
回答by Günter Z?chbauer
UPDATE
更新
Use ViewContainerRef.createComponent()
用 ViewContainerRef.createComponent()
- https://angular.io/guide/dynamic-component-loader
- https://angular.io/api/core/ViewContainerRef#createComponent
- https://angular.io/guide/dynamic-component-loader
- https://angular.io/api/core/ViewContainerRef#createComponent
For a full example see Angular dynamic tabs with user-click chosen components
有关完整示例，请参阅带有用户单击所选组件的 Angular 动态选项卡
ORIGINAL
原来的
DynamicComponentLoaderwas removed long ago
DynamicComponentLoader很久以前被删除了
You can use DynamicComponentLoaderfor this purpose, but it's a bit cumbersome and has some issues related to bindings.
您可以为此目的使用DynamicComponentLoader，但它有点麻烦并且有一些与绑定相关的问题。
See also:
也可以看看：
- http://www.syntaxsuccess.com/viewarticle/loading-components-dynamically-in-angular-2.0
- DynamicComponentLoader breaks Data binding
- DynamicComponentLoader does not support inputs or outputs
- Initial Changedetection not working with DynamicComponentLoader
- Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader
- How to provide data to a @Component through DynamicComponentLoader?
- Angular2: Creating child components programmatically
