Angular — активированный маршрут в событии щелчка

#angular #angular-routing #angular-router #angular-routerlink #angular-activatedroute

#angular #angular-маршрутизация #angular-маршрутизатор #angular-routerlink #angular-активированный маршрут

Вопрос:

Я использую ActivatedRoute для вызова сводной таблицы из одного компонента в другой компонент, и я добавил ниже, что не могу получить сводную таблицу, как ожидалось, в событии щелчка

вкладка-routing.module.ts

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TABMasterComponent } from '../tabs/tab-master/tab-master.component';


const routes: Routes = [
  { path: "tabmasters", component: TABMasterComponent,
        loadChildren:'../tabs/tab-master/tab-master.component',
     data:{
       istab : false
     }
     },
];

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

tabmasters.component.ts

 istab = false;


constructor(private fb: FormBuilder,private router: Router, private toastr:ToastrService, private route:ActivatedRoute) {
      this.istab = this.route.snapshot.data.istab;
      console.log('here',this.route.snapshot.data)
      }
  

tabmaster.component.html

 <div *ngIf="iscontrol">
        <div class="table-responsive">
            <table class="table">
                <thead class="table_header">
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let cl of ClList;">
                        <td>{{ cl.name}}</td>
                    </tr>
                </tbody>
            </table>
         </div>
</div>
<div *ngIf="istab">
        <div class="table-responsive">
            <table class="table">
                <thead class="table_header">
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let tab of tabList;">
                        <td>{{ tab.name}}</td>
                    </tr>
                </tbody>
            </table>
         </div>
</div>


  

Я хочу показать сводку istab при использовании события щелчка в компоненте приложения. но я сталкиваюсь с проблемой в том, что эти две приведенные выше таблицы находятся в компоненте вкладки, и я хочу показать сводку istab только в событии щелчка

 TAB1----isctrl summary              TAB2-----istab summary                   
  

Я использовал boolean , если я нажму tab 1 isctrl true , и istab false , и если я нажму tab2 ista , это true и isctrl есть false

два приведенных выше резюме, в tabcomponent которых отображаются вкладки начальной загрузки, такие как вкладки ниже

вкладки начальной загрузки

мое приложение.компонент.HTML похож

 <button (click)="gotoTabsUMMARY()"></button>
  

и мое приложение.компонент.TS похож на

 istab = false;


constructor(private fb: FormBuilder,private router: Router, private toastr:ToastrService, private route:ActivatedRoute) {
      this.istab = this.route.snapshot.data.istab;
      console.log('here',this.route.snapshot.data)
      }



gotoTabsUMMARY(){
        this.router.navigate(["/tabsmasters"], { skipLocationChange: true, this.istab})
}



  

Я хочу перейти к сводной таблице в событии щелчка в компоненте приложения. обычная ссылка на маршрутизатор работает, но я хочу получить сводку, которая находится в tab2, я использовал другой метод, который не работает, как использовать activatedRoute это..