Angular ユーザーが選択したコンポーネントを含む動的タブ
私は、コンポーネントが自分自身を（タイトル付きで）登録できるようにするタブシステムを設定しようとしています。最初のタブは受信トレイのようなもので、ユーザーが選択できるアクション/リンク項目がたくさんあります。これらの各クリックで、クリック時に新しいコンポーネントをインスタンス化できるはずです。アクション/リンクはJSONからもたらされます。
インスタンス化されたコンポーネントはそれ自身を新しいタブとして登録します。
これが「最善」のアプローチであるかどうかわかりませんか。私が見た唯一のガイドは静的なタブのためのものです、それは役に立ちません。
これまでのところ、私はアプリケーション全体を通して永続化するためにmainでブートストラップされているtabサービスしか持っていません。
export interface ITab { title: string; }
@Injectable()
export class TabsService {
private tabs = new Set<ITab>();
addTab(title: string): ITab {
let tab: ITab = { title };
this.tabs.add(tab);
return tab;
}
removeTab(tab: ITab) {
this.tabs.delete(tab);
}
}
質問：
- 新しい（異なる）タブを作成する動的なリストを受信トレイに表示する方法を教えてください。
DynamicComponentBuilderが使われるだろうと私は推測していますか？ - 受信ボックス（クリック）で作成されたコンポーネントをタブとして登録して表示するにはどうすればよいですか。私は
ng-contentを推測していますが、それを使用する方法について多くの情報を見つけることができません
編集：明確にしてみてください
受信トレイをメールの受信トレイと考えると、アイテムはJSONとして取得され、いくつかのアイテムが表示されます。項目の1つがクリックされると、その項目アクション「タイプ」を使用して新しいタブが作成されます。その型はコンポーネントです
編集2：画像
更新
更新
ngComponentOutletが4.0.0-beta.3に追加されました
更新
同様のことを行うNgComponentOutlet作業が進行中です。{ https://github.com/angular/angular/pull/11235
RC.7
// Helper component to add dynamic components
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
@Input() type: Type<Component>;
cmpRef: ComponentRef<Component>;
private isViewInitialized:boolean = false;
constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
// when the `type` input changes we destroy a previously
// created component before creating the new one
this.cmpRef.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
使用例
// Use dcl-wrapper component
@Component({
selector: 'my-tabs',
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: 'my-app',
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
// The list of components to create tabs from
types = [C3, C1, C2, C3, C3, C1, C1];
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, DclWrapper, Tabs, C1, C2, C3],
entryComponents: [C1, C2, C3],
bootstrap: [ App ]
})
export class AppModule {}
angular.io DYNAMIC COMPONENT LOADER も参照してください。
古いバージョン xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
これはAngular 2 RC.5でも変更されました。
以下の例を更新しますが、休暇の前日です。
この Plunker example はRC.5でコンポーネントを動的に作成する方法を示します
更新 - ViewContainerRef を使用する_。createComponent（）
DynamicComponentLoaderは推奨されていないため、このアプローチをもう一度更新する必要があります。
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
更新 - loadNextToLocationを使用
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private dcl:DynamicComponentLoader) {}
updateComponent() {
// should be executed every time `type` changes but not before `ngAfterViewInit()` was called
// to have `target` initialized
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
オリジナル
あなたの質問からあなたの要求が何であるかについて完全に確実ではないが、私はこれがあなたが望むものをするべきであると思う。
Tabsコンポーネントは渡された型の配列を取得し、配列内の各項目に対して "タブ"を作成します。
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
@Input() type;
ngOnChanges() {
if(this.cmpRef) {
this.cmpRef.dispose();
}
this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
}
@Component({
selector: 'c1',
template: `<h2>c1</h2>`
})
export class C1 {
}
@Component({
selector: 'c2',
template: `<h2>c2</h2>`
})
export class C2 {
}
@Component({
selector: 'c3',
template: `<h2>c3</h2>`
})
export class C3 {
}
@Component({
selector: 'my-tabs',
directives: [DclWrapper],
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: 'my-app',
directives: [Tabs]
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
types = [C3, C1, C2, C3, C3, C1, C1];
}
Plunkerの例beta.15 （あなたのPlunkerには基づいていません）
動的に作成されたコンポーネントに渡すことができるようにデータを渡す方法もあります（someDataはtypeのように渡す必要があります）。
this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
cmpRef.instance.someProperty = someData;
this.cmpRef = cmpRef;
});
共有サービスで依存性注入を使用するためのいくつかのサポートもあります。
詳しくは https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html を参照してください。
コメントが足りない。私は受け入れられた答えからplcerをrc2で動くように修正しました。空想は、CDNへのリンクが壊れていただけですべてです。
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
すぐに使えるコンポーネントがあります（rc5互換） ng2-steps ステップコンテナにコンポーネントを注入するためにCompilerを使い、すべてを一緒に配線するためのサービス（data sync）
import { Directive , Input, OnInit, Compiler , ViewContainerRef } from '@angular/core';
import { StepsService } from './ng2-steps';
@Directive({
selector:'[ng2-step]'
})
export class StepDirective implements OnInit{
@Input('content') content:any;
@Input('index') index:string;
public instance;
constructor(
private compiler:Compiler,
private viewContainerRef:ViewContainerRef,
private sds:StepsService
){}
ngOnInit(){
//Magic!
this.compiler.compileComponentAsync(this.content).then((cmpFactory)=>{
const injector = this.viewContainerRef.injector;
this.viewContainerRef.createComponent(cmpFactory, 0, injector);
});
}
}