Как перейти от одного компонента к другому и скрыть первый компонент? - PullRequest
Новая
       66

Как перейти от одного компонента к другому и скрыть первый компонент?

0 голосов
/ 01 мая 2020

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

Ниже приведены мои файлы:

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParticipantsViewComponent } from './components/ParticipantsView/participants-view/participants-view.component';
import { DashBoardComponent } from './components/DashBoardComponent/dash-board/dash-board.component';

const routes: Routes = [
  {path: "dash-board", component: DashBoardComponent },
  {path: "participantsView", component: ParticipantsViewComponent }
];

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

посадочная страница. html (индекс. html) 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body>
  <risk-assessment-stage></risk-assessment-stage>
</body>
</html>

приложение-посадка. html

<dash-board></dash-board>
<router-outlet></router-outlet>

dashboard.component. html

<input type="button" value="clear" (click)="navigateToParticipantView()"/>
<a routerLink="/participantsView" routerLinkActive="active">
  Click here
</a>

dashboard.component.ts 

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

import {Router,ActivatedRoute } from "@angular/router"

@Component({
  selector: 'dash-board',
  templateUrl: './dash-board.component.html',
  styleUrls: ['./dash-board.component.scss']
})
export class DashBoardComponent {

  constructor(public router: Router){}

  navigateToParticipantView(){
    this.router.navigate(['/participantsView']);
  }

}

enter image description here

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

1 Ответ

0 голосов
/ 01 мая 2020

Хорошо, так что это сработало !!!!

Все, что мне пришлось изменить, - app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParticipantsViewComponent } from './components/ParticipantsView/participants-view/participants-view.component';
import { DashBoardComponent } from './components/DashBoardComponent/dash-board/dash-board.component';

const routes: Routes = [
  {path: "dash-board", component: DashBoardComponent },
  {path: "participantsView", component: ParticipantsViewComponent },
  { path: '',   redirectTo: '/dash-board', pathMatch: 'full' },
];

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

app-landing. html

<dash-board></dash-board>
<router-outlet></router-outlet>
...