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

];

export const appRouterProviders = [ provideRouter（路由） ];

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

问题在于这个组件我相信我只想在这个页面中选择转到另一个页面，看起来很简单，不确定它为什么不起作用。以下页面将从菜单栏导航中插入路由器插座。菜单栏中没有此文件中的链接（＆＃39; / questions / ask＆＃39;）。

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类的navigationByUrl（）方法转到所需的路由。示例：

Component.ts文件

[Environment]

Component.html链接

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("");
  }

}

页面没有完全刷新，就好像它是常规的<p>Have an account? <a (click)="goToLoginPage()" class="signup">Sign in</a></p>链接一样。我还查看了“网络”标签，没有看到任何新项目。

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

1 个答案: