Как я могу изменить стиль CSS в другом компоненте, нажав кнопку?

Я разработал компонент test1, который содержит кнопку и файл <p>Hello World</p>. Когда я нажимаю на кнопку, цвет фона абзаца меняется. Но теперь я хочу изменить цвет фона в app.component, когда я нажимаю кнопку. Пробовал решить проблему с @Input, но, к сожалению, пока не получается. Не могли бы вы мне помочь? Мой Stackblitz

Мой код:

// test1.component

// HTML
<button type="button" (click)="testHandler()">Change Color</button>
<p [class.toggled]="classToggled">Hello World</p>

// CSS
.toggled {
background-color: blue !important;
}

// TS
public classToggled = false;
testHandler() {
this.classToggled = true;
}

// app.component

// HTML
<div class="wrapper" [class.test1]="classToggled">
  <router-outlet></router-outlet>
</div>

// CSS
.test1 {
  background-color: red !important;
}

// TS
 @Input()  public classToggled = false;

typescript angular angular-event-emitter
person and.neo2020    schedule 20.09.2020    source источник
comment
ваш компонент test1 находится внутри компонента приложения, верно?   -  person Kamran Khatti    schedule 20.09.2020
comment
Да все верно.   -  person and.neo2020    schedule 20.09.2020
comment
Затем вместо декоратора ввода вы можете использовать вывод и передать значение.   -  person Kamran Khatti    schedule 20.09.2020

Ответы (2)


arrow_upward
0
arrow_downward

Есть несколько способов сделать это.

Для несвязанных компонентов вы можете использовать одноэлементную службу, чтобы совместно использовать объект стиля между компонентами и связать его с помощью [ngStyle].

style.service.ts

@Injectable({ providedIn: 'root' })
export class StylingService {
  sharedStyleSource = new ReplaySubject<any>(1);
  public sharedStyle$ = this.sharedStyleSource.asObservable();

  constructor() { }

  newStyle(value: any) {
    this.sharedStyleSource.next(value);
  }
}

app.component.ts

import { StylingService } from './styling.service';

@Component({
  ...
})
export class AppComponent  {
  constructor(private styling: StylingService) { }

  onClick() {
    this.styling.newStyle({ 'background-color': 'blue' });
  }
}

app.component.html

<button (mouseup)="onClick()">Change child style</button>

<app-test></app-test>

test.component.ts

import { StylingService } from '../styling.service';

@Component({
  ...
})
export class TestComponent {
  constructor(private styling: StylingService) { }
}

test.component.html

<p [ngStyle]="(styling.sharedStyle$ | async)">
  test works!
</p>

Рабочий пример: Stackblitz

person Michael D    schedule 20.09.2020
comment
Я посмотрел на ваш пример и у меня есть несколько вопросов. Можно ли также реализовать кнопку в test.component и изменить цвета, щелкнув параллельно абзацу в test.component и div из app.component? - person and.neo2020; 20.09.2020

arrow_upward
0
arrow_downward

Здравствуйте, вы можете использовать ngClass и передать параметр. NgClass Angular

person erevos13    schedule 20.09.2020