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?
}
}
そして、これをプロバイダーとして宣言し、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
}
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
}
}
Info
コンポーネント内に要素を追加する代わりに、Günterが提案するDynamicComponentLoader
を使用してこのコンポーネントを動的に追加できます。
@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
});
}
}
お役に立てばと思います、ティエリー
[〜#〜] update [〜#〜]
ViewContainerRef.createComponent()
を使用
完全な例については、「 選択したコンポーネントをユーザーがクリックした場合の動的なタブ 」をご覧ください
[〜#〜] original [〜#〜]
DynamicComponentLoader
はずっと前に削除されました
この目的で DynamicComponentLoader を使用できますが、少し面倒であり、バインディングに関連するいくつかの問題があります。
こちらもご覧ください: