Angular 在填充属性值之前呈现内部html

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

组件A.ts

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

})

export class SqvLibComponent {

   seq: string;

   populate(op: Options): void {

    ----some other functions---

     this.seq = 'someData';
}

export class SqvLibComponent {

  public constructor(public op: Options) {
  this.populate(op);
  }
}

组件B.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);

  }
}

TemplateB具有选择器

Template在this.seq属性收到值之前渲染视图

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

我注意到，如果我在构造函数中给this.seq赋值，该值就会显示在视图中。 所以我试着将选项传递给构造函数，如下所示：

组件B.ts

new SqvLibComponent(options);

然后是组件A.T

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

})

export class SqvLibComponent {

   seq: string;

   populate(op: Options): void {

    ----some other functions---

     this.seq = 'someData';
}

export class SqvLibComponent {

  public constructor(public op: Options) {
  this.populate(op);
  }
}

---

但这会给出有关我试图传递的对象的错误。

请尝试在属性

this.seq

收到值之前使用

ngIf

避免渲染

TemplateA

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

或：

---

当BrowserModule导出CommonModule时，它现在说：无法绑定到“ngIf”，因为它不是“div”的已知属性。我用的是Angular 7，可能是版本有问题吧？我将进一步研究这一点，以找到类似的东西。谢谢你的建议。据我所知，你不应该在模板中使用“this”。只是“seq”，所以，我已经导入了CommonModule，并且在模板中只使用了“seq”。现在错误是：“error:StaticInjectorError（AppModule）[NgIf->ViewContainerRef]：StaticInjectorError（Platform:core）[NgIf->ViewContainerRef]：NullInjectorError:没有ViewContainerRef的提供程序！”@martinabevillacqua看起来您在组件中使用了其他一些指令。试着像这样使用

，最后我在templateB中使用了一个指令，然后使用@Input（）op:Options并在componentA中实现了Oninit。