在/创建动态组件Angular2中解析数据

Question

我试图将数据从一个组件分析到另一个组件。

基本上，我创建了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 [config]="_messageConfig中的任何内容..................................................

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",
  };
}

我的if-else语句在这里声明。如果我的描述不确定（false），它将返回fl-comtestcom>中的任何内容，否则如果不是不确定的（true）。它应该显示错误。

我不确定该如何编写语法。任何帮助将非常感激。预先感谢

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;
     }
  }  
}

Answer 1

如果我正确理解您，您想根据某种条件显示不同的内容。所以我会这样做：

@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;
}

然后使用它：

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

如果要显示自定义错误。

或不通过config（或从config删除description属性），它将显示Light Dom

plunker示例