Угловой - Как я могу переключить видимость элемента в компоненте из другого компонента?

1

У меня есть следующий сценарий в моем приложении "Угловое":

Компонент MainDashboardComponent который отображается, когда у меня есть маршрут /. Очевидно, что у меня есть <router-outlet> в моем файле app.component.html, который выглядит так:

<app-side-menu></app-side-menu>
<div class="main-container">
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

Как вы можете видеть, у меня есть SideMenuComponent я использую, чтобы иметь боковое меню на всех моих маршрутах. В MainDashboardComponent меня есть метод, который по какой-то причине должен переключать элемент чата, который находится в боковом меню. Внутри SideMenuComponent меня есть метод, который управляет переключением видимости для элемента чата, и он работает так, как ожидалось. Как я могу вызвать этот метод из моего MainDashboardComponent и переключить элемент чата?

То, что я пробовал без успеха

Я попытался ввести SideMenuComponent внутри моего MainDashboardComponent но, хотя toggleChat() метод toggleChat(), элемент не изменяет его видимость. Похоже, у меня есть несколько экземпляров одного и того же компонента, я думаю...

Не могли бы вы мне помочь? Спасибо!

MainDashboardComponent

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

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

  constructor() { }

  ngOnInit() {}

  setFocus(id) {
    // here I'd like to call SideMenuComponent togglechat() ... 
  }
}

SideMenuComponent

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

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

  showChat: boolean;

  constructor() {
    this.showChat = false;
  }

  ngOnInit() {
  }

  toggleChat() {
    this.showChat = !this.showChat;
  }

}
  • 0
    Вы можете добавить полный код для этого
  • 0
    какой ваш MainDashboardComponent? Является ли MainDashboardComponent одним из маршрутов?
Показать ещё 4 комментария
Теги:
angular
angular-components

3 ответа

3
Лучший ответ

Для связи между различными компонентами существуют разные способы.

  • Если вы хотите установить связь между родительским и дочерним компонентами, вы можете использовать EventEmitter для генерации события из дочернего компонента и обработки события в своем родительском компоненте
  • Если вы хотите общаться между любыми компонентами, вы можете использовать Сервис и осуществлять связь с помощью EventEmitter или Subject/BehaviorSubject

В вашем случае мы можем создать службу myService.ts и declare и eventEmitter

.service.ts

@Injectable()
export class AppCommonService {

 toggle : EventEmitter<boolean> = new EventEmitter<boolean>()

}

mainDashboard.component.ts

constructor(private myService : myService){}

chatStatus : boolean = false;
ngOnInit(){
 this.myService.toggle.subscribe(status=>this.chatStatus = status);
}

toggleChat(){
 this.myService.toggle.emit(!this.chatStatus);
}

sideMenu.component.ts

constructor(private myService : myService){}

chatStatus : boolean = false;

ngOnInit(){
  this.myService.toggle.subscribe(status=>this.chatStatus = status);
}
  • 0
    Отличное и простое решение! Именно то, что я искал! У меня никогда не было такого случая, и я никогда не думал, как делать такие вещи, теперь буду помнить об этом :) Спасибо, Сартак!
1

Как правило, это домен сервиса!

  • Просто создайте службу и добавьте свойство showCat.
  • Внедрить сервис в оба компонента
  • Alter SideMenuComponent для:

    toggleChat() {
        this.myService.showChat = !this.myService.showChat;
    }
    
  • Alter MainDashboardComponent, также используйте this.myService.showChat, чтобы показать/скрыть ваше окно чата

Сервисный TS

@Injectable()
export class MyService{
  showCat:boolean = true
}

MainDashboardComponent

toggleChat() {
   this.myService.showChat = !this.myService.showChat;
}

SideMenuComponent

chatVisiblity = this.myService.showCat //<-- bind this to the element attribute
0

В этом случае вы могли бы эффективно использовать связь между родителями и родителями. Вам необходимо создать собственное событие с использованием углового EventEmitter в вашем SideMenuComponent и использовать его в своем MainDashboardComponent.

Итак, вот какой код, который может вам помочь -

// SideMenuComponent
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.scss']
})
export class SideMenuComponent implements OnInit {
    @Output() valueChange = new EventEmitter();
    showChat: boolean;

    constructor() {
        this.showChat = false;
    }

    ngOnInit() {
    }

    toggleChat() {
        this.showChat = !this.showChat;
        this.valueChange.emit(this.showChat);
    }

}

// MainDashboardComponent
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-main-dashboard',
    template: '<app-side-menu (valueChange)='setFocus($event)'></app-side-menu>'
    styleUrls: ['./main-dashboard.component.scss']
})
export class MainDashboardComponent implements OnInit {

    constructor() { }

    ngOnInit() { }

    setFocus(event) {
        // check for required input value 
        console.log(event);
    }
}

При необходимости обратитесь к этим учебным пособиям: https://dzone.com/articles/understanding-output-and-eventemitter-in-angular, https://angular-2-training-book.rangle.io/handout/components/app_structure/responding_to_component_events.html

Ещё вопросы

Сообщество Overcoder
Наверх
Меню