当我在 app.module.ts 上有承诺代码时，路由器 Link 指令不起作用

Question

我有一个应用程序有一个登录页面和一个注册页面，所以当我点击两个页面中的按钮时，它必须从一个页面切换到另一个页面。这样可行！但是当我添加代码来隐藏持久菜单时，前面提到的按钮停止工作。

此代码包含一个承诺。

我检测到当这部分代码被注释时，应用程序运行正常，所以问题可能出在应用程序的这部分使用 promises

登录时html

<div class="col-lg-4 col-md-4 col-sm-5 col-xs-5 paddingsLog">
  <a routerLink="/registro" routerLinkActive="active">
      <button type="button" class="btnGeneral btnWhite">Regístrate</button>
  </a>
</div>

寄存器同上

在 app.module

export class AppComponent {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
  ) {
    this.menuAndTitle();
  }

  public menuAndTitle() {
    let getUrl = new Promise((resolve, reject) => {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        console.log("Nav ends" + this.activatedRoute);
        let url = this.location.path();
        resolve(url);
        console.log("URL subscribe: " + url);
      });
    });


    getUrl.then((url: string) => {
        const urlActual = url;
        console.log('Url actual: ' + typeof(urlActual) + ' | ' + urlActual);
        if (urlActual.includes('registro')) {
          this.canShowTemplate = false;
        } else if (urlActual.includes('login')) {
          this.canShowTemplate = false;
        }
      }
    }
  }

我看到的是 promise 影响了 routerLink 指令的行为，这可能吗？

Answer 1

我无法解释为什么您当前的模板会这样，但我可以通过执行以下重构找到解决方法：

<div *ngIf="canShowTemplate; else not">  
  <p>
    New mode
  </p>
  <router-outlet></router-outlet>
</div>
<ng-template #not>
  <div >  
    <hello name="{{ name }}"></hello>
    <p>
      Start editing to see some magic happen :)
    </p>
    <router-outlet></router-outlet>
  </div>
</ng-template>

此外，您当前用来创建 Promise<string> 的方法是 leak-prone，因为永远不会取消订阅 Router.events。我建议在您的组件代码中进行以下重构：

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location) {
  }

  ngOnInit() {
    this.menuAndTitle();
  }

  public menuAndTitle() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1),
      mapTo(this.location.path())
    ).toPromise().then((url: string) => {
      console.log('Url actual: ' + typeof (url) + ' | ' + url);
      if (url.includes('register')) {
        this.canShowTemplate = true;
      } else if (url.includes('login')) {
        this.canShowTemplate = true;
      } else {
        this.canShowTemplate = false;
      }
      console.log(this.canShowTemplate);
    })
  }

工作解决方案可以在this blitz

中找到

当我在 app.module.ts 上有承诺代码时，路由器 Link 指令不起作用

Router Link directive doesn't work when I have a promise code on app.module.ts

routerlink

angular

angular7