Angular 2 routerLink无法在路由器插座内部工作

Question

My routerLink work outside of my the router-outlet in the navigation component but when I have a page that is within the router-outlet that has a routerlink to a different page I get an error.

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)

My router is a basic router.

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},

];

export const appRouterProviders = [ provideRouter(routes) ];

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

The problem is in this component I believe I just want to have the option to go to a different page within this page, seems straightforward not sure why it is not working. The below page would be inserted into the router-outlet from the menubar navigation. The link('/questions/ask') within this file is not available in the menu bar.

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

The workaround I found to work is use a click method on the link and set a method inside the component's ts file to go to the route needed by using the Router class' navigateByUrl() method. Example:

Component.ts file

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 link

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

The page doesn't fully refresh it acts as if it were a regular <router-outlet> link. I also looked at the network tab and didn't see any new items appear.