angular - 从Angular中的组件向html添加控件

Question

我有这种问题，想用条件逻辑向 html 内容添加一些额外的 html 内容。但问题是 angular 无法识别 angular 语法，这是从组件手动添加的。

  public isExist: boolean = false;
  @ViewChild('appDropdown') appUnit: any;

  ngOnInit(): void {
    var el = this.appUnit._elementRef.nativeElement.querySelector('.list-area');;
    el.insertAdjacentHTML('beforeend','<div class="list-item-container add-container">'
                                      +   '<a class="btn btn-add" title="New">'
                                      +     '<span>+</span>'
                                      +   '</a>'
                                      +   '<label *ngIf="isExist" class="item-label add-label">Add</label>'
      + '</div>');


  }

这是一段代码。我的意思是 *ngIf 不能被 Angular 识别。

我怎么能这样做，那个 Angular 能够在这种时候识别它自己的语法？
为了更清楚，我使用这个 dropdown组件，我想为它添加一些额外的功能。我想添加带有按钮的页脚，能够在其上保存和编辑记录。但不幸的是，它不支持这种自定义，我的尝试是初始化访问下拉正文并从组件手动添加此 html

Answer 1

这不是在 Angular 应用程序中动态添加元素的正确方法。创建新 DOM 元素的正确方法是注入(inject) Render2服务到您的组件中并使用辅助方法。另一种选择是使用 Dynamic Component Loader ，这将允许您定义一个组件，并随意插入它。
特别是在您的情况下，我不明白为什么您甚至需要 Render2 或动态组件加载器。

@Component({
  selector: "my-component",
  template: `
    <div class="list-item-container add-container">
    <a class="btn btn-add" title="New">
      <span>+</span>
    </a>'
    <label *ngIf="isExist" class="item-label add-label">Add</label>
`
  styleUrls: ["./my-component.component.css"]
})
export class MyComponent {
  isExist = false;
}

您的方法不起作用的原因是模板语法在构建/运行时转换为完全不同的东西。事实上， *ngIf如果条件不满足，指令会从 DOM 中完全删除元素。
为了演示，我们可以在 StackBlitz 上查看一个非常简单的组件。使用 *ngIf .

@Component({
  selector: "my-app",
  template: `
    <input type="checkbox" [(ngModel)]="isShown">
    <p *ngIf="isShown">
        I am some text!!
    </p>
  `
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isShown = false;
}

最初呈现时，生成的 HTML 看起来像这样。请注意 <p>元素不在 DOM 中。您会注意到该元素实际上没有 *ngIf在上面。

<my-app _nghost-dvn-c21="" ng-version="11.0.5">
   <input _ngcontent-dvn-c21="" type="checkbox" ng-reflect-model="false" class="ng-untouched ng-pristine ng-valid">
<!--bindings={ "ng-reflect-ng-if": "false" }-->
</my-app>

然后，如果您选中该框， <p>元素现在在 DOM 中。

<my-app _nghost-lsw-c0="" ng-version="11.0.5">
   <input _ngcontent-lsw-c0="" type="checkbox" ng-reflect-model="true" class="ng-valid ng-dirty ng-touched">
     <!--bindings={
      "ng-reflect-ng-if": "true"
      }-->
   <p _ngcontent-lsw-c0=""> I am some text!!</p>
</my-app>