Question

可以说我们有一个带有选择器“ grid”的角度分量吗？

@Component({
  selector: 'grid',
  template: '<div>This is a grid.</div>',
  styleUrls: ['./grid.component.scss']
})

现在，当我们在另一个组件中使用此网格时，我们将执行以下操作。

    <p>This is another component.</p>
    <div>
    <grid></grid>
    <grid></grid>
    <grid></grid>
    <grid></grid>
    </div>

最终渲染时。 html如下所示。

<p>This is another component.</p>
<div>
<grid><div>This is a grid.</div></grid>
<grid><div>This is a grid.</div></grid>
<grid><div>This is a grid.</div></grid>
<grid><div>This is a grid.</div></grid>
</div>

现在，我不想在此处使用网格标签。相反，我只想要以下内容。

<p>This is another component.</p>
<div>
<div>This is a grid.</div>
<div>This is a grid.</div>
<div>This is a grid.</div>
<div>This is a grid.</div>
</div>

我该怎么做？

Answer 1

当您不想使用DOM标签时，可以使用属性选择器。

@Component({
  selector: '[grid]',
  template: '<div>This is a grid.</div>',
  styleUrls: ['./grid.component.scss']
})

然后在模板中：

<p>This is another component.</p>
<div>
<div grid></div>
</div>

渲染后变成哪个：

<p>This is another component.</p>
<div>
<div grid><div>This is a grid.</div></div>
</div>

通常这就是您在<table>结构内使用组件的方式。例如;您可能想将组件应用于<td>元素。

如果您的组件内部需要 structural HTML元素，但又不希望它们成为呈现的HTML的一部分，则可以使用<ng-container>。这是一个特殊的DOM元素，它是组件的一部分，但不是DOM呈现结果的一部分。

@Component({
  selector: '[grid]',
  template: '<ng-container>This is a grid.</ng-container>',
  styleUrls: ['./grid.component.scss']
})

渲染后变成哪个：

<p>This is another component.</p>
<div>
<div grid>This is a grid.</div>
</div>

您可以使用<ng-container>将*ngIf之类的结构指令应用于HTML的外部部分，而不必添加不需要的HTML。

Answer 2

您可以使用属性选择器

<p>This is another component.</p>
<div>
<div grid></div>
</div>

Answer 3

这可以通过ViewContainerRef实现假设您有组件A

@Component({
 selector: 'a-comp',
  template: `
  <span>I am A component</span>`,
   })
  export class AComponent {
  }

然后在应用模块的声明和entryComponents中注册它

@NgModule({
 imports: [BrowserModule],
 declarations: [AppComponent,       AComponent],
 entryComponents: [AComponent],
  bootstrap: [AppComponent]
   })
   export class AppModule {
   }

然后在父级App组件中放入创建A组件实例并将其插入的代码

@Component({
 moduleId: module.id,
 selector: 'my-app',
  template: `
  <h1>I am parent App component</h1>
  <div class="insert-a-component-    inside">
      <ng-container #vc></ng-container>
      </div>
     `,
     })
    export class AppComponent {
     @ViewChild('vc', {read:        ViewContainerRef}) vc: ViewContainerRef;

     constructor(private r:       ComponentFactoryResolver) {}

     ngAfterViewInit() {
     const factory =    this.r.resolveComponentFactory(AComponent);
     this.vc.createComponent(factory);
     }
     }

希望这会有所帮助

渲染后如何替换角度分量标签？

3 个答案: