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（或从description移除config属性），它将显示轻量DOM

<强> Plunker Example

在/创建动态组件angular2

1 个答案: