[英]SOLVED! Angular 9 routerlink and router-outlet problems
我目前正在做的練習有問題,由於路線的原因我無法完成,我有一個子視圖並且不能使用 routerLink 不可點擊!
我有一個視圖,用於使登錄重定向到具有子組件的主組件,並且在那里路由鏈接不起作用,保持正常文本。
當我嘗試使用路由器插座時,編譯會出現錯誤:
練習/home/home.component.html:15:5 中的錯誤 - 錯誤 NG8001:'router-outlet' 不是已知元素:
15 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
練習/home/home.component.ts:6:16 6 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~ 錯誤出現在組件 HomeComponent 的模板中。
場景是這樣的:
1- app.component.html 有一個導航欄用於重定向到另一個頁面並且工作正常,我的問題從練習 2 的路線開始- 視圖是:
練習登錄首頁 view1 view2
3- 我在登錄頁面上有一個重定向到主頁的輸入,他有一個導航欄重定向到 view1 和 view2,但是“routerLink”和“router-outlet”不起作用。 4- 我的文件高於 5- Angular 版本 9.0.3
有人可以幫助理解我做錯了嗎?!
========================解決方案:在聲明中添加 MISSING COMPONENT HomeComponent
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { UrlParamsComponent } from './url-params/url-params.component';
import { FormsModule } from '@angular/forms';
import { UserComponent } from './child-route/user/user.component';
import { ExerciseComponent } from './exercise/exercise.component';
import { SimpleRouteComponent } from './simple-route/simple-route.component';
import { CodeDrivenComponent } from './code-driven/code-driven.component';
import { QueryParamsComponent } from './query-params/query-params.component';
import { ChildRouteComponent } from './child-route/child-route.component';
import { LoginComponent } from './exercise/login/login.component';
@NgModule({
declarations: [
AppComponent,
NotFoundComponent,
UrlParamsComponent,
UserComponent,
ExerciseComponent,
SimpleRouteComponent,
CodeDrivenComponent,
QueryParamsComponent,
ChildRouteComponent,
LoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
============================ app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" routerLink="">Angular Routing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="simple-route" routerLinkActive="active">Simple-route</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="code-driven" routerLinkActive="active">Code-Driven</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="url-params" routerLinkActive="active">Url-Params</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="query-params" routerLinkActive="active">Query-Params</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="child-route" routerLinkActive="active">Child-Route</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="exercise/login" routerLinkActive="active">Exercise</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
====================================== app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';
import { UrlParamsComponent } from './url-params/url-params.component';
import { UserComponent } from './child-route/user/user.component';
import { USER_CHILD_ROUTES } from './child-route/user/user.routes';
import { HomeComponent } from './exercise/home/home.component';
import { HOME_CHILD_ROUTES } from './exercise/home/home-routing';
import { SimpleRouteComponent } from './simple-route/simple-route.component';
import { CodeDrivenComponent } from './code-driven/code-driven.component';
import { FirstRouteComponent } from './simple-route/first-route/first-route.component';
import { SecondRouteComponent } from './simple-route/second-route/second-route.component';
import { FirstCodeDriverComponent } from './code-driven/first-code-driver/first-code-driver.component';
import { SecondCodeDriverComponent } from './code-driven/second-code-driver/second-code-driver.component';
import { UrlParamsFirstComponent } from './url-params/url-params-first/url-params-first.component';
import { UrlParamsSecondComponent } from './url-params/url-params-second/url-params-second.component';
import { QueryParamsComponent } from './query-params/query-params.component';
import { QueryParamsFirstComponent } from './query-params/query-params-first/query-params-first.component';
import { ChildRouteComponent } from './child-route/child-route.component';
import { ExerciseComponent } from './exercise/exercise.component';
import { LoginComponent } from './exercise/login/login.component';
const routes: Routes = [
// simple link routes
{ path: "simple-route", component: SimpleRouteComponent },
{ path: "simple-route/first-route", component: FirstRouteComponent },
{ path: "simple-route/second-route", component: SecondRouteComponent },
// code routes
{ path: "code-driven", component: CodeDrivenComponent },
{ path: "code-driven/first-code-driver", component: FirstCodeDriverComponent },
{ path: "code-driven/second-code-driver", component: SecondCodeDriverComponent },
// Using URL PARAMS
{ path: "url-params", component: UrlParamsComponent },
{ path: "url-params/url-params-first/:message", component: UrlParamsFirstComponent },
{ path: "url-params/url-params-second/:message", component: UrlParamsSecondComponent },
// Using Query PARAMS
{ path: "query-params", component: QueryParamsComponent },
{ path: "query-params/query-params-first/:message", component: QueryParamsFirstComponent },
// Child routes
{ path: "child-route", component: ChildRouteComponent },
{ path: "child-route/user/:id", component: UserComponent, children: USER_CHILD_ROUTES },
// Exercise
{ path: "exercise", component: ExerciseComponent },
{ path: "exercise/login", component: LoginComponent },
{ path: "exercise/home/:username", component: HomeComponent, children: HOME_CHILD_ROUTES },
// redirects to the home-root component
// { path: "", redirectTo: "", pathMatch: "full" },
// not found any route
{ path: "**", component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
這是我的問題,我無法點擊路由器
================ home.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
user: User = new User();
constructor(activatedRoute: ActivatedRoute) {
activatedRoute.params.subscribe((params) => {
this.user.username = params['username'];
});
}
ngOnInit() {
}
}
class User {
username: string;
}
================================== home.component.html
<hr>
<ul class="nav navbar-nav item">
<li>
<a routerLink='View1'>View1</a>
</li>
<li>
<a routerLink="View2">View2</a>
</li>
</ul>
<h1>Welcome Home, {{user.username}}</h1>
<div class="container">
<!-- <router-outlet></router-outlet> -->
</div>
<br>
<a routerLink="exeercise/login">Logout</a>
===================================
home-routing.ts
import { Routes } from '@angular/router';
import { View1Component } from './view1/view1.component';
import { View2Component } from './view2/view2.component';
export const HOME_CHILD_ROUTES: Routes = [
{ path: "view1", component: View1Component },
{ path: "view2", component: View2Component }
];
====================================
login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username: string;
constructor(private router: Router) { }
ngOnInit(): void {
}
login() {
console.log('TRIGGER LOGIN...', this.username);
this.router.navigate(['exercise/home', this.username]);
}
}
============================ login.component.html
<hr>
<input [(ngModel)]="username" type="text">
<button (click)="login()">Login</button>
將RouterModule
導入您的 app.module.ts
import { RouterModule } from '@angular/router';
將RouterModule
添加到您的 app.module.ts imports []
imports: [RouterModule]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.