Блог

У меня есть угловой компонент, который должен отображать различную информацию в зависимости от того, какая кнопка была нажата для маршрутизации к нему. Если была нажата кнопка 1, я хочу установить button1=true в component2 и использовать ngIf для отображения правильной информации. Если была нажата кнопка 2, я хочу установить button2=true и использовать ngIf для отображения правильной информации.

Два компонента имеют разные URL-адреса и не являются родительскими / дочерними друг для друга.

Приведенный ниже код представляет собой простой пример того, чего я пытаюсь достичь.

Как я могу сообщить компоненту 2, была ли нажата кнопка 1 или кнопка 2?

comp1.component.ts

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

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {

  constructor(private router: Router,) { }

  public onButton1(){
    this.router.navigate(['/comp2']);
  }

  public onButton2(){
    this.router.navigate(['/comp2']);
  }

  ngOnInit() {
  }

}
 

comp1.component.html

 <div>
    <button (click)="onButton1()">Button1</button>
    <button (click)="onButton2()">Button2</button>
</div>
 

comp2.component.ts

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

@Component({
  selector: 'app-comp2',
  templateUrl: './comp2.component.html',
  styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {

  public button1 = false;
  public button2 = false;

  constructor() { }

  ngOnInit() {
    // if button pressed == "button1" in component 1
    this.button1 = true

    // if button pressed == "button2" in component 1
    this.button2 = true
  }

}
 

comp2.component.html

 <div *ngIf="button1">
    Button 1 was clicked
</div>

<div *ngIf="button2">
    Button 2 was clicked
</div>

 

app-routing.module.ts

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';

const routes: Routes = [
  { path: 'comp1', component: Comp1Component },
  { path: 'comp2', component: Comp2Component }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

app.component.html

 <router-outlet></router-outlet>
 

Вы могли бы отправить параметр в маршруте, который затем можно было бы получить в компоненте 2 с помощью ActivatedRoute . Если вы ожидаете использовать только 2 кнопки, то это может быть просто логический флаг для обозначения условия. Если нет, вы могли бы подумать об использовании других методов для обозначения состояний (например, перечислений).

Я проиллюстрирую это логическим

Компонент 1

 export class Comp1Component implements OnInit {
  public onButton1(){
    this.router.navigate(['/comp2', {state:true}]);
  }

  public onButton2(){
    this.router.navigate(['/comp2', {state:false}]);
  }
}
 

Компонент 2

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

export class Comp2Component implements OnInit {
  public state = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.state = this.route.snapshot.paramMap.get('state');
  }
}
 

Шаблон компонента 2

 <div *ngIf="state; else otherState">
    Button 1 was clicked
</div>

<ng-template #otherState>
    Button 2 was clicked
</ng-template>
 

Иметь общую службу, внедренную в оба компонента, знать, какая кнопка была нажата

Обслуживание:

 @Injectable({
  providedIn: 'root'
})
export class Service {
  button1Clicked: false;
}
 

Компонент1:

 constructor(private service: Service){}
public onButton1(){
    // with the injected service
    this.service.button1Clicked = true;
    this.router.navigate(['/comp2']);
  }
 

Затем в вашем другом компоненте вы можете сделать

 constructor(private service: Service){}
ngOnInit(){
  if (this.service.button1Clicked)
     this.button1 = true
}