Question

我有一个由componentA和templateA组成的库。在templateA中，我通过innerhtml绑定来绑定componentA的属性。有一个函数populate（obj），它接收一个对象“选项”，然后使用它来获取一个有用的值来设置该属性。

ComponentA.ts

library(data.table)

setDT(df)[, New_Name := c(paste0(Country, collapse = " + ")[1L],  rep(NA, .N -1)), by = ID]

#df
#ID    Country                  New_Name
#1: 55     Poland Poland + Romania + France
#2: 55    Romania                      <NA>
#3: 55     France                      <NA>
#4: 98      Spain     Spain + Portugal + UK
#5: 98   Portugal                      <NA>
#6: 98         UK                      <NA>
#7: 65    Germany                   Germany
#8: 67 Luxembourg                Luxembourg
#9: 84     Greece                    Greece
#10: 22    Estonia       Estonia + Lithuania
#11: 22  Lithuania                      <NA>

ComponentB.ts

@Component({
  selector: 'lib-sqv',
  templateUrl: './templateA.component.html'

})

export class SqvLibComponent {

   seq: string;

   populate(op: Options): void {

    ----some other functions---

     this.seq = 'someData';
}

TemplateB具有选择器。

TemplateA视图在属性this.seq接收值之前呈现。

我注意到，如果我在构造函数中给this.seq赋值，则该值会显示在视图中。因此，我试图像这样将选项传递给构造函数：

ComponentB.ts

@Component({
  selector: 'app-root',
  templateUrl: './templateB.component.html'
})

export class AppComponent implements OnInit {

 ngOnInit() {


    let options = { someValue }

    const s: SqvLibComponent = new SqvLibComponent();
    s.populate(options);

  }
}

然后在ComponentA.ts

new SqvLibComponent(options);

但这会给我要传递的对象带来错误。

Answer 1

尝试使用ngIf避免在属性TemplateA收到值之前呈现this.seq。

<ng-container ngIf="seq">
    <templateA></templateA>
</ng-container>

As Angular documentation says:

ngIf是结构指令，有条件地包含基于以下内容的模板表达式的值强制为布尔值。当表达评估为true，Angular会在子句，当为false或null时，Angular呈现提供的模板在可选的else子句中。 else子句的默认模板为空。

更新：

在Angular 7 *ngIf指令中，需要像以下这样显式地提供给模块：

@NgModule({
  imports: [CommonModule],

OR：

@NgModule({
  imports: [BrowserModule],

随着BrowserModule导出CommonModule

内部html在填充属性值之前被渲染

1 个答案: