Angular компонентов

Question

У меня есть пользовательский компонент (my-card), это строка компонента материала mat-card. Как связать поле со значением, чтобы при использовании моей карты в другом компоненте у меня была возможность записать один класс, и это будут пользовательские стили.

    <mat-card [class]="matClass">
  <mat-card-title>{{title}}</mat-card-title>
  <mat-card-subtitle>{{subtitle}}</mat-card-subtitle>
  <mat-card-content>{{content}}</mat-card-content>
  <ng-content></ng-content>
</mat-card>



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

@Component({
  selector: 'app-my-card',
  templateUrl: './my-card.component.html',
  styleUrls: ['./my-card.component.scss']
})
export class MyCardComponent implements OnInit {

@Input()  title: string;
@Input() subtitle: string;
@Input() content: string;
@Input() pathToImg: string;
@Input() matClass: string;
  constructor() { }

  ngOnInit(): void {
  }

}


    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'custom';
  content = ['h', 'i', 'g', 'k', 2, 5, 3];
  letters = ['a', 'b', 'c', 'd', 'e', 'f', 'j',  console.log(typeof(this.content))];
  imgUrl = '../code.png';
  class = 'myClass';

  constructor() {}

  onClick() {
    console.log('click');
    // console.log(typeof(this.matClass))
    // console.log(this.matClass)
  }
}

<h1>My custom card</h1>
<app-my-card
[matClass]="class"
[title]="title"
[subtitle]="letters"
><button mat-raised-button (click)="onClick()"> buton</button></app-my-card>



    SCSS ==>    myClass{
      width: 250px;

    }

введите описание изображения здесь

Answer 1

Есть несколько изменений, которые вам нужно сделать. Я бы посоветовал вам go - Angular документацию по привязкам [class] и ngClass.

Изменения, которые вам нужно сделать:

1) Привязка шаблона будет выглядеть следующим образом:

<mat-card [ngClass]="matClass">
  <mat-card-title>{{title}}</mat-card-title>
  <mat-card-subtitle>{{subtitle}}</mat-card-subtitle>
  <mat-card-content [ngClass]="someClass">{{content}}</mat-card-content>
  <ng-content></ng-content>
</mat-card>

2) myCardComponent.ts

   @Input() matClass;
   @Input() someClass;

3) Установите значение true для передачи значения компоненту матовой карты.

export class AppComponent {
  title = 'custom';
  content = ['h', 'i', 'g', 'k', 2, 5, 3];
  letters = ['a', 'b', 'c', 'd', 'e', 'f', 'j',  console.log(typeof(this.content))];
  imgUrl = '../code.png';
  class = true;
  displayedClass = {'displayedClassName': false};
  someClass = {'someClassName': false};
  cardio = 'some text';

  constructor() {}

  onClick() {
    console.log('click');
    this.displayedClass = {'displayedClassName': true};
    this.someClass = {'someClassName': true};
  }
}

4) В css (стиль. css), селектор класса начинается с. (точка)

/* Add application styles & imports to this file! */
.someClassName{
  color: red;
}
.displayedClassName{
  color: yellow;
}