Изучение Angular и что решает домашний экран HTML - PullRequest
1 голос
/ 12 июня 2019

В Angular 8 Routes 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

1 Ответ

1 голос
/ 12 июня 2019

Точно! При начальной загрузке 'AppComponent' модуль маршрутизатора оценивает входящее выражение пути браузера и передает управление соответствующему угловому компоненту.

/*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().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...