如何从一个组件导航到另一个组件并隐藏第一个组件？

Question

我想从仪表板组件导航到参与者视图组件。我可以显示参与者视图组件，但不确定如何隐藏仪表板组件。任何帮助将不胜感激。我尝试了一堆东西，但似乎没有任何效果。我可能错过了一些我想不通的东西。

下面是我的文件：

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 { }

landingPage.html（index.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>

app-landing.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']);
  }

}

如您所见，我能够看到参与者视图组件，但无法隐藏按钮和链接。请帮忙。提前谢谢！！

Answer 1

好的，它起作用了！！！

我只需要更改我的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>

如何从一个组件导航到另一个组件并隐藏第一个组件？

问题描述投票：0回答：1

1个回答

最新问题

如何从一个组件导航到另一个组件并隐藏第一个组件？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1