删除角度 6 中的组件标记

Question

我试图从 html 中删除被调用的组件标签，以防止来自外部库的一些损坏的 css（例如，从 clear 项目中调用 sidenav）：

something.component.ts

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'app-something',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.css']
})
export class SomethingComponent implements OnInit {
  @Input() config: {} = {};
  ....
}

东西.component.html

<div>
    Hello World
</div>

另一个.component.html

 <div>
    <app-something [config]="somethingConfig"></app-something>
 </div>

然后输出：

 <div>
    <app-something>
      <div>
          Hello World
      </div>
    </app-something>
</div>

而且我要：

<div>
  <div>
     Hello World
  </div>
</div>

是的，我知道，stackoverflow 中有很多关于它的答案，基本上我可以恢复 2 个项目中的所有答案：

• 将括号添加到选择器（ selector: '[app-something]' ）：不起作用，它会触发错误

  组件SomethingComponent的选择器应该用作元素（ https://angular.io/styleguide#style-05-03 ）（组件选择器）。

• 使用指令：指令不能有templateUrl参数。

Answer 1

使用属性选择器似乎是解决这个问题的最好方法。 您得到的错误不是由于 angular 不支持方括号来实现这一点，而是您的应用程序中一定有其他问题。 我建议查看有关如何为组件使用属性选择器的示例。

还要记得改

<div> 
    <div>Hello World</div>
</div>

到

<div> 
    <div app-something></div> 
</div> 

使属性选择器有效。

Answer 2

从您的组件中，将选择器更改为div[app-something]

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'div[app-something]',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.css']
})
export class SomethingComponent implements OnInit {
  @Input() config: {} = {};
  ....
}

然后您可以将该组件与div标签一起使用

<div> 
    <div app-something [config]="config"></div> 
</div>