Angular 将 html 属性（即样式/类）从父级传递给子级答案

【问题标题】：Angular pass html attributes (i.e. style/class) from parent to childAngular 将 html 属性（即样式/类）从父级传递给子级
【发布时间】：2020-07-01 20:35:12
【问题描述】：

我正在尝试找出一种方法来将 html 属性（如样式和类）从父组件传递到子组件，而无需自定义 @Input() 值。我见过可以传入<lib-dropdown myStyle="style="width:100%;"> 的示例，但这意味着我必须对我想使用的每一个html 属性进行编程。另外，我通过我使用的一些第 3 方 angular 库看到了一些方法，您可以在其中调用您的子组件，它会以某种方式获取您在 <lib-dropdown style="width:100%;"/> 中添加的样式和类。

那么有没有办法做到这一点，我不必为每个 html 属性创建一个 @Input() 值，所以我可以只做 <lib-dropdown style="width:100%;"/> 并让它自动应用于我的组件？即使我必须在我的子组件的ngOnInit 中对其进行编程，也没关系。只是好奇是否有更好的方法？

【问题讨论】：

标签： angular parent-child

【解决方案1】：

尝试使用服务将 HTML 从父级传递给子级。

在属性中存储 HTML 标签

htmlStr = "<h1> Hey There </h1>";

并尝试调用服务方法：

this.setHTMLService.setHtml(this.htmlStr);

然后在接收组件中：

import { setHTMLService} from 'src/app/shared/service/setHTML.service';

export class ReceivingComponent implements OnInit {
 htmlExample = '';

constructor(private setHTMLService: setHTMLService) {}
}

ngOnInit() {
      this.htmlExample = this.setHTMLService.getHtmlExample();
}

在您的模板中：

<div [innerHtml]="htmlExample"><div>

【讨论】：

问题是我必须为我想要的每个属性都这样做。我想做的是以某种方式扩展 html dom，并添加我的附加属性：\

【解决方案2】：

如果你想将很多样式传递给一个元素，那么你可以使用这个

<div [styles]=[customStyles]>Child component</div>

但这不是一个好的做法，因为对于这些情况，最好使用 CSS。

【讨论】：

我希望避免这种情况，因为我必须为我想要使用的每个 html 属性创建一个@Input。有没有办法通过指令潜在地做到这一点？
你的意思是html标签还是html样式属性？
任一。例如，如果我想添加一个占位符，我不想更新我的子组件来处理它。我希望能够去