相关疑难解决方法(0)

有没有办法在Angular 2中动态插入一个组件作为DOM标记的子(而不是兄弟)？

有很多例子可以将动态组件作为给定ViewContainerRef标签的兄弟插入,例如(从RC3开始):

@Component({
  selector: '...',
  template: '<div #placeholder></div>'
})
export class SomeComponent {
  @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;

  constructor(private componentResolver: ComponentResolver) {}

  ngAfterViewInit() {
    this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) => {
        this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

但这会生成类似于以下内容的DOM:

<div></div>
<my-dynamic-component></my-dynamic-component>

预期结果:

<div>
    <my-dynamic-component></my-dynamic-component>
</div>

使用SomeComponent's ViewContainerRef具有相同的结果,它仍然将生成的组件插入为兄弟,而不是孩子.我可以使用一个解决方案,其中模板为空,动态组件插入模板中(在组件选择器标签内).

当使用像ng2-dragula这样的库从动态组件列表中拖动并从模型更新中受益时,DOM结构非常重要.额外的div位于可拖动元素的列表中,但在模型之外,打破了拖放逻辑.

有人说这是不可能的(参见此评论),但这听起来像是一个非常令人惊讶的限制.

我对 Angular 很陌生，我试图将 html 文件作为我的字符串插入并插入到 DIV 元素中

我有我的search.component.html电话

<div #ID></div>

组件.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  constructor() {}

  let ServerResponseHtml = '<div><input type="text"/><input type="text"/><span class="btn btn-outline-primary btn-sm" (click)="open(content)">View Document</span></div>';

  document.getElementById("DIV").innerHTML = ServerResponseHtml;
}

我从服务器获取响应作为完整的 html 标记，我只需要附加到我的 DOM 中并显示内容，标记也可以具有内联样式。

我试过了，<div [innerHTML]="ServerResponseHtml"></div> and <div innerHTML="{{ServerResponseHtml}}"></div>但这不是显示为 html，而是显示为文本。

我在模板中有一个div，该模板以#divMessages作为模板引用名称。

          <div  #divMessages></div>

当发生某些事件时，我想将html标签附加到该div。我尝试了以下方式，但将html标签附加为字符串。

            this.divMessages.nativeElement.append('<li>'+data.message+ '</li>');

我当前的方法认为html标签为字符串。我如何附加html标签，以隐藏标签并仅显示数据。（在上述情况下，仅显示列表项，而标签则隐藏）。