Angular 組件中的兩個不同類

Question

假設我有一個如下所示的HTML組件：

<div class="avatar">Some name</div>

SCSS 組件如下所示：

.avatar {
  height: 60px;
  width: 60px;

  &.small {
    height: 40px;
    width: 40px;
  }
}

ts組件就像這樣：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'lqs-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

當我在其他地方使用該組件時，我只是這樣做，例如：

<lqs-avatar></lqs-avatar>

所以我的問題是：我怎樣才能讓我可以在正常頭像尺寸和小尺寸（即更改類）之間進行更改？

我的意思是，我可以只創建一個小的頭像組件，但這似乎有點矯枉過正。 我不應該只能說這樣的話：

<lqs-avatar size="small"></lqs-avatar>

然后它給班級增加了小或類似的東西？

Answer 1

您可以將Input()添加到您的組件，這將允許您將數據從父組件傳遞到您的組件。 在div標簽之間使用名稱時也可以考慮到這一點。

您的組件將如下所示：

注意：我添加了一個large尺寸以顯示更多可以做的事情。 您需要添加 css 或從 ts/html 邏輯中刪除large 。

@Component({
  selector: 'lqs-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnInit {

  @Input() size: 'small' | 'medium' | 'large' = 'medium'
  @Input() name = ''

}

然后模板將有一個ngClass ，然后您可以根據size輸入值切換 div 上的類。

<!-- No need to test for medium because it is the default style -->
<div class="avatar" [ngClass]="{
  small: size === 'small',
  large: size === 'large'
}">
  {{name}}
</div>

最后，您可以從另一個組件中調用該組件：

<!-- The following two are for medium/default size -->
<lqs-avatar></lqs-avatar>
<lqs-avatar size="medium"></lqs-avatar>

<!-- This one is for a large size avatar -->
<lqs-avatar size="large"></lqs-avatar>

<!-- This one is for a small size avatar -->
<lqs-avatar size="small"></lqs-avatar>

<!-- Set a size and name -->
<lqs-avatar size="small" name="Billy Joe"></lqs-avatar>

<!-- Loop over an array of users with avatars -->
<lqs-avatar *ngFor="let user of users" size="small" [name]="user.name"></lqs-avatar>

Answer 2

是的，你需要使用@Input()上的裝飾AvatarComponent 。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'lqs-avatar',
  templateUrl: './avatar.component.html',
  styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnInit {
  @Input() size: string;
  constructor() { }

  ngOnInit() {

  }

}

// HTML
<div [ngClass]="['avatar', size]">Some name</div>

// To use
<lqs-avatar size="small"></lqs-avatar> (1)
// Or
<lqs-avatar [size]="'small'"></lqs-avatar> (2)
// The first way is the preferred way if the `small` string will never change