如何将 class 传递给子组件？

Question

我有一个像这样的子组件：

<img [src]="imageToShow" alt="photo">

我想通过父母将 class 传递给孩子：

<app-image [image]="data.image" class="img w-100 shadow"></app-image>

怎么做？

Answer 1

- 您可以将父样式表导入到子组件的样式表中，只需使用 class。 - 如果您想要的 class 中有特定属性，您可以根据它是哪个属性尝试继承值......也许可以工作。

假设这就是你的意思。 如果没有，查看文件会有所帮助。

Answer 2

If your class are defined "globally" -eg in the styles.css or any file you indicate in angular.json (in "styles" array), you can pass as any @Input and use [ngClass]

//child
@Input() image:string;
@Input() classcss:string;
<img [ngClass]="classcss" [src]="image" alt="photo">

//parent 
<app-image [image]="data.image" classcss="w-100 shadow"></app-image>

另一种选择是使用一些类似

//parent
<app-image [image]="data.image" class="child"></app-image>
//parent.css (or styles.css)
.child img{
   width:100%;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

或者干脆

//parent
<app-image [image]="data.image"></app-image>
//parent.css (or styles.css)
app-image img{  //<--see that use "app-image"
   width:100%;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

您也可以使用“css 变量”。 所以，在 child.css

img {
   width: var(--width);
   box-shadow: var(--box-shadow)
}

在parent.css（或styles.css）

app-image {
  --width: 100%;
  --box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

但我不太确定你想要实现什么