时间戳

首页 > 解决方案 > 学习 Angular 以及决定主屏幕 html 的因素

angular - 学习 Angular 以及决定主屏幕 html 的因素

问题描述

在 Angular 8 中，路由 app-routing.module.ts 很简单，如果 app.component.html 有链接和文本，则可以正确使用该应用程序。

在我的研究中，我遇到了一个 app.component.html 像这样的应用程序；

<body>
  <app-nav-menu></app-nav-menu>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</body>

我在这里看到HomeComponent应用程序启动时已加载并了解 app.module.ts 中的声明和设置，

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

import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { AddContactComponent } from './add-contact/add-contact.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    ContactComponent,
    AddContactComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatListModule,
    MatSelectModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'contact/:id', component: ContactComponent },
      { path: 'new-contact', component: AddContactComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是HomeComponent设置为路由器插座起始页的位置在哪里？

RouterModule.forRoot

标签： angulartypescriptroutes

解决方案

确切地！在引导“AppComponent”时，路由器模块评估传入的浏览器路径表达式并将控制权委托给相应的 Angular 组件。

/*https://<domain-name>:<optional-port>/           - Will take you to HomeComponent

https://<domain-name>:<optional-port>/contact      - Will take you to ContactComponent with route param id:undefined or null
https://<domain-name>:<optional-port>/contact:100  - Will take you to ContactComponent with route param id:100*/

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      ...])

路由全部基于我们使用的配置，RouterModule.forRoot().

推荐阅读