1

あるコンポーネントから別のコンポーネントにデータを解析しようとしています。データの解析/動的コンポーネントの作成angle2

基本的に、私は2つのコンポーネントを作成しました。

<fl-comtestCom [config]="_messageConfig" > 
    Please <strong><b>remember</b></strong> that you are using ng-content as 
there is <b>no input</b> in description 
</fl-comtestCom> ` 

しかし、もちろん作られているいくつかのロジックと設定があるはずです:私の意図は、それがでその所望の場所でコードを配置することができ、バックエンドの開発者が使用することができ、動的コンポーネントを作成することです。

これは説明に入力する(説明に以下のコードで参照:「エラー」)がある場合は....ロジックがどのように動作するかを

であることは何でも読みます他、それはエラーが表示されます私の説明が定義されていない場合のステートメントは、それが未定義でない場合、それは他に、fl-comtestcom>の内側にあるものは何でも返します(偽) ....ここで宣言されている場合、他の

import { Component , OnInit , Input } from '@angular/core'; 
@Component({ 
    selector: 'fl-comtest', 
template: ` 

<fl-comtestCom [config]="_messageConfig" > 
     Please <strong><b>remember</b></strong> that you are using ng-content as there is <b>no input</b> in description 
</fl-comtestCom> ` 
}) 
export class FLComptest implements OnInit{ 

    private _messageConfig: any = { 

    description:"Error", 
    }; 
} 

私...... fl-comtestCom [config]="_messageConfigの内側にあります(真)。エラーが表示されるはずです。

構文をどのように書くべきかわかりません。どんな助けでも大歓迎です。事前に感謝します

import { Component , OnInit , Input } from '@angular/core'; 

@Component({ 
selector: 'fl-comtestCom', 
template: ` 

<template #ngContent> 
    <ng-content></ng-content> 
</template> 

` 
}) 

export class FLTestComponent implements OnInit{ 

    private _message: any = {}; 

    private _default: string = {description : ""}; 
    @Input() config: string; 


    ngOnInit() { 
    console.log(this.config); 

    if(typeof this.config.description == "undefined") { 
     this.description 
    } 
    else (this.config.description != "undefined") { 
     this.description; 
    } 

    } 

} 

答えて

1

私は正しくあなたがいくつかの条件によって異なる内容を表示したいと思います。だから私はこのようにそれを行うだろう:

<fl-comtestCom [config]="config" > 
    Please <strong><b>remember</b></strong> that you are using ng-content as .... 
</fl-comtestCom> 

をカスタムエラーを表示したい場合:

@Component({ 
    selector: 'fl-comtestCom', 
    template: ` 
     <ng-content *ngIf="!config?.description"></ng-content> 
     <div *ngIf="config?.description" [outerHTML]="config?.description"></div> 
    ` 
}) 
export class FLTestComponent { 
    @Input() config: string; 
} 

はそれが好きで使用しています。

またはconfigを渡す(またはconfigからdescriptionプロパティを削除)し、それが光DOMが表示されますしません

Plunker Example

関連する問題