如何具體頁面使用angular路由器

Question

我想用 angular 路由器切換兩個頁面，我已將這兩個組件添加到 angular 路由器但是，無論 url 我嘗試，瀏覽器總是顯示“登錄”組件。 如果我刪除“登錄”，則“儀表板”顯示成功。

這是我的示例代碼：

儀表板.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent   {
  title = 'dashboard';
}

登錄組件.ts

@Component({
  selector: 'app-root',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  title = 'login';
}

app.component.html

<h1>{{title}}</h1>
<router-outlet></router-outlet>

app.component.ts

export class AppComponent implements OnInit {
    title = 'Here is AppComponent';
    ngOnInit() {}
}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SimpleNotificationsModule.forRoot(),
  ],
  providers: [],
  bootstrap: [DashboardComponent, LoginComponent]
})
export class AppModule { }

應用程序路由.module.ts

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard',  component: DashboardComponent },
];
@NgModule({
  imports: [RouterModule.forRoot( appRoutes,
    { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

索引.html

..
..
<base href="/">

</head>
<body>
<app-root></app-root>
</body>
</html>

我想問題是組件selector: 'app-root' ？

我希望有人可以幫助我，並非常感謝您的幫助。

Answer 1

兩個組件的選擇器是相同的。 即應用程序根。

從 dashboard.component.ts 和 login.component.ts 中的 @Component 裝飾器中刪除 selector 屬性

由於您在 app.routing.module.ts 中為這些組件定義了路由，因此無需聲明選擇器屬性

如何具體頁面使用angular路由器

問題描述

1 個解決方案

解決方案1
1 2019-11-04 10:52:47

如何具體頁面使用angular路由器

問題描述

1 個解決方案

解決方案1 1 2019-11-04 10:52:47

解決方案1
1 2019-11-04 10:52:47