Question

我制作了一个Angular4组件，它生成的页面有一个导航到另一个页面的按钮。我没有收到任何错误，pageUrl也发生了变化，但页面内容保持不变。

这是我的代码：

app.component.ts

My redhat version is 7.3
64 bit 
and I am not subscribe to redhat . 
So when ever i install any package it say

app.module.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {

constructor(private router: Router){}

username = "";
password = "";
log = function () {
   if (this.username != "" && this.password != "") {
     console.log(this.username + "   " + this.password);
     this.router.navigate(['/dashboard']);
   }
}
}

app.component.html

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
  ],
  imports: [
     BrowserModule,
     FormsModule,
     RouterModule.forRoot([
   {
    path: 'dashboard',
    component: DashboardComponent
   }
 ]
 )
 ],
 providers: [],
 bootstrap: [AppComponent],
 })
 export class AppModule {
 }

Answer 1

要实现您的目标，请app.component仅包含路由器插座：

@Component({
  selector: 'app-root',
  template: `
        <!-- Views go here-->
        <router-outlet></router-outlet>     
  `,
})
export class AppComponent { }

然后为您想要的每个视图设置一个单独的组件。因此，在您的情况下，您需要创建一个LoginComponent，然后从那里路由到DashboardComponent。

PS当然这是可扩展的，您可以在AppComponent html或其他任何内容中添加标题组件标记，依此类推。但只是为了展示这个简单的用例。

Answer 2

您需要指定显示DashboardComponent的位置添加此标记以告知angular从路由器

显示组件结果的位置

<router-outlet></router-outlet>

Angular4中的路线导航没有反应

2 个答案: