Question

在Angular5应用程序中，我的路由定义如下：

path: 'my-object/:id',
    component: MyObjectDetailComponent,
    children: [
        {path: '', redirectTo: 'sublist', pathMatch: 'full'},
        {path: 'sublist', component: PointComponent},
        {path: 'new', component: PointFormComponent},
    ],

在MyObjectDetailComponent模板文件中我有：

<button #new />
<router-outlet></router-outlet>

当我向用户显示PointForm时，我需要隐藏一些界面对象（比如新按钮）。

我相信我需要在网址或路线上添加某种观察者 - 但不知道该怎么做（以及在哪里）。

当用户输入PointFormComponent（路径：new）时，它应该隐藏<button #new />（以及其他一些UI元素），并在他离开时再次显示它们。

Answer 1

您需要这样做，意味着您需要检查路线更改，如果更改的路线中包含新的路线，则将hideflag设为true并隐藏contorls

class MyClass {
  hideInputs = false;
  constructor(private router: Router) {
    router.events.subscribe((val) => {
      const href = window.location.href;
       this.hideInputs = href.endsWith('/new');
    });
  }
}


<button *ngIf="hideInputs " #new />

Answer 2

您可以在MyObjectDetailComponent中添加类似的内容：

import { Router } from '@angular/router';

export class MyObjectDetailComponent implements OnInit {

    currentUrl: string;

    constructor(private router:Router) {  }

    ngOnInit() {
        // that´s how you get the current url
        currentUrl = this.router.url; 
    }
}

在模板中添加类似的内容

<button *ngIf="currentUrl == ![add path to "new" url here]" #new />
<router-outlet></router-outlet>

角度儿童路线观察员

2 个答案: