web-dev-qa-db-ja.com

Angular2のngOutletContextを介してテンプレートにコンテキストを渡す

テンプレートを渡すコンポーネントがあります。このコンポーネントの内部で、データを表示できるようにコンテキストを渡したいと思います。

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

他のコンポーネントの内部でコンポーネントを使用する場合：

<my-component>
    <template>
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

したがって、my-componentでは、_@ContentChildによってクラスで処理されるテンプレートを、templという名前で渡します。

次に、my-componentのテンプレートでtemplをngTemplateOutletに渡しています。さらに、ngOutletContextをisVisibleに設定したtrueを使用してコンテキストを渡しています。

画面にyes!が表示されるはずですが、コンテキストが渡されないようです。

私のangularバージョン：

"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
javascriptangulartypescriptangular2-templateangular2-directives
13
Tukkan

久しぶりに作りました。

単一の値の例：

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

<my-component>
    <template let-isVisible="isVisible">
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

ループの例：

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <div *ngFor="let element of data">
        <template [ngTemplateOutlet]="templ" [ngOutletContext]="{element: element}">
        </template>
    </div>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){
        this.data = [{name:'John'}, {name:'Jacob'}];
    }
}

--- 

<my-component>
    <template let-element="element">
        {{element.name}}
    </template>
</my-component>

結果：

<div>John</div>
<div>Jacob</div>
28
Tukkan

ヘッドアップngOutletContextは非推奨になり、ngTemplateOutletContextに名前が変更されました。

変更ログで「NgTemplateOutlet＃ngTemplateOutletContext」を検索します

[〜＃〜] changelog [〜＃〜]

7
Acker Apple