Question

我对Angular非常陌生，可以通过示例学习。我使用选择器创建了要在app.component中调用的nav组件。我想要做的就是根据要路由到的页面在nav组件中隐藏一些列表条目。例如，如果我以示例的方式导航到“登录”页面，那么我无法确定的事情是如何将变量“ showLogin”设置为true。我相当确定，即使在登录组件启动之前，也会创建nav组件。我确实认为服务是要走的路？我正在使用Angular 7。

Answer 1

如果您要路由到不需要登录但需要更改导航栏中显示项目的其他页面，那么我认为您不需要为此提供服务。在您的导航组件中插入Router，并收听路由器NavigationEnd事件。

ngOnInit() {
  // Router is injected in the constructor and the variable name is _router
  this._router.events.pipe(
    filter(event => event instanceof NavigationEnd))
    .subscribe(
        (data: NavigationEnd) => {
            // set your flag here depending on the url
            console.log(data.url)
        }
    );
}

如果您基于登录状态限制导航组件上的项目，则可以使用服务（可能正在使用localStorage或cookie），并且可以通过将简单属性绑定到服务的更新属性来删除/在导航组件中添加项目。

Answer 2

我意识到我必须将路由器的实例声明为构造函数的一部分。因此，由于xyz，以下内容可以100％起作用。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'nav-menulist',
  templateUrl: './menulist.component.html',
  styleUrls: ['./menulist.component.css']
})
export class MenulistComponent implements OnInit {

  constructor(private myservice: VariableService, private _router?: Router) { }

  ngOnInit() {

    this._router.events.pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(
          (data: NavigationEnd) => {
              // set your flag here depending on the url
              console.log(data.url)
          }
      );
  }
}

使用通过导航中的路由选择的页面

2 个答案: