javascript - Angular 2 routerLink 无法在路由器导出内工作

Question

我的 routerLink 在导航组件中的路由器导出之外工作，但是当我的路由器导出内有一个页面具有指向不同页面的路由器链接时，我会收到错误。

browser_adapter.ts:82 TypeError: Cannot read property 'startsWith' of undefined
at UrlParser.parseRootSegment (url_tree.ts:301)
at DefaultUrlSerializer.parse (url_tree.ts:196)
at Router.navigateByUrl (router.ts:242)
at RouterLinkWithHref.onClick (router_link.ts:90)
at DebugAppView._View_ProfileFeedComponent0._handle_click_12_0 (ProfileFeedComponent.template.js:381)
at eval (view.ts:406)
at eval (dom_renderer.ts:274)
at eval (dom_events.ts:20)
at ZoneDelegate.invoke (zone.js:323)
at Object.onInvoke (ng_zone_impl.ts:72)

我的路由器是一个基本路由器。

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import {ProfileFeedComponent} from "./profileFeed/profileFeed.component";
import {QuestionComponent} from "./questions/question.component";
import {QuestionAskComponent} from "./questionAsk/questionAsk.component";


export const routes: RouterConfig = [
  {path: '', component: HomeComponent,  pathMatch: 'full'},
  {path: 'profile-feed', component: ProfileFeedComponent},
  {path: 'question', component: QuestionComponent},
  {path: 'question/ask', component: QuestionAskComponent},

];

导出常量appRouterProviders = [ 提供路由器(路由)];

export const appRouterProviders = [
  provideRouter(routes)
];

app.component.html

<navigation></navigation>

<div class="wrapper">
    <router-outlet></router-outlet>
</div>

app.component.ts

@Component({
  moduleId: module.id,
  selector: "my-app",
  templateUrl: "app.component.html",
  directives: [ ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, NavigationComponent],
   })
export class AppComponent {
 public viewContainerRef : ViewContainerRef;
 public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
     this.viewContainerRef = viewContainerRef;
 }
}
//ALL IMPORTS ARE PROPERLY INCLUDED IN THIS FILE

问题出在这个组件中，我相信我只是想选择转到此页面中的不同页面，看起来很简单，不知道为什么它不起作用。下面的页面将从菜单栏导航插入到路由器 socket 中。此文件中的链接('/questions/ask')在菜单栏中不可用。

profileFeed.component.ts

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES, RouterLink, Router} from "@angular/router";


import {ProfileInfoComponent} from "../profileInfo/profileInfo.component";

@Component({
  moduleId: module.id,
  selector: 'profile-feed',
  templateUrl: 'profileFeed.component.html',
  styleUrls: ['profileFeed.component.css'],
  directives: [
    ProfileInfoComponent,
    RouterLink,
    ROUTER_DIRECTIVES
  ]
})
export class ProfileFeedComponent {

}

profileFeed.component.html

<div class="profile-feed-container container">
  <div class="profile-detail-summary container-fluid">
    <profile-info></profile-info>
    <hr>
    <div class="container-fluid">
        <div class="container-fluid">
            <a class="btn btn-default" routerLink='/question/ask'>Ask a Question</a>
        </div>
    </div>
  </div>
</div>

Answer 1

我发现有效的解决方法是在链接上使用 click 方法，并在组件的 ts 文件中设置一个方法，以使用 Router 类的 navigatorByUrl() 方法转到所需的路线。示例:

Component.ts 文件

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

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

  goToLoginPage() {
    this.router.navigateByUrl("");
  }

}

Component.html 链接

<p>Have an account? <a (click)="goToLoginPage()" class="signup">Sign in</a></p>

该页面没有完全刷新，它的行为就好像它是常规的 <router-outlet>关联。我还查看了网络选项卡，没有看到任何新项目出现。