Question

嘿那里我试图打开和关闭一个组件，但我似乎无法让它工作......

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  router: string;

  constructor(private _router: Router)
  {
      this.router = _router.url;
  }
}

app.component.html

<app-header></app-header>
<app-header-home *ngIf="router !== ''"></app-header-home>
<router-outlet></router-outlet>
<app-footer></app-footer>

路线配置

export const ROUTES: Routes = [
  { path: '', component: HomeComponent, pathMatch="full" },
  { path: 'who-we-are', component: WhoWeAreComponent},
  { path: 'our-technology', component: OurTechnologyComponent},
  { path: 'our-work', component: OurWorkComponent },
  { path: 'get-in-touch', component: GetInTouchComponent }
];

的index.html

 <base href="/">

所以基本上如果我从家里开始我想要显示app-header-home组件，但是当我导航到我希望app-header-home隐藏的新部分时，然后如果我回到家里我想要它再次出现

谢谢

Answer 1

您想订阅路线更改，并根据打字稿中的路线更改布尔标志：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  routeHidden = true;

  constructor(
    private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe( (e) => {
      if (e instanceof NavigationStart) {
        if (e.url === "/") {
            this.routeHidden = false;
        } else {
            this.routeHidden = true;
        }
      }
    })
  }

}

并在你的html模板中：

<app-header-home *ngIf="routeHidden"></app-header-home>

Answer 2

尝试使用ActivatedRoute服务

constructor(private route: ActivatedRoute){
   this.router= route.snapshot.url.join('');
}

根据路径Angular 4切换组件

2 个答案: