Tipps zur Verwendung von Routern in Angular4

Dieses Mal gebe ich Ihnen Tipps zur Verwendung des Routers in Angular4. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Routers in Angular4?

Router, auch Routing genannt, ist ein relativ wichtiges Konzept im Frontend. Die spezifische Adresse und die entsprechende Seite werden über den Router verknüpft und getrennt, um den Zweck der Entkopplung zu erreichen. Erstellen Sie einen neuen Detailordner im Verzeichnis src/app und erstellen Sie eine Datei mit dem Namen gundam-detail.component.

import { Component } from '@angular/core';
import { Gundam } from '../../model/gundam';
@Component({
  template: `
    <p *ngIf="selectedGundam">
    <span>{{selectedGundam.name}}</span>
    <span>{{selectedGundam.type}}</span>
    </p>
  `
})
export class GundamDetailComponent {
    selectedGundam: Gundam;
}

ps: Bezüglich der Benennung lautet die Benennungsmethode grundsätzlich xxx+"-"+"Business Type"+"Component Type", zumindest wird dies in der offiziellen Dokumentation empfohlen. Natürlich können Sie die Komponente auch Zhutou San nennen, eine Standardbenennung kann jedoch die Lesbarkeit der Komponente erhöhen. Selbst wenn es Ihnen nichts ausmacht, zufällige Betreuer zu benennen, kann niemand sicher sein, dass sie den gleichen Codeabschnitt nicht in längerer Zeit noch einmal umgestalten. Deshalb müssen Sie immer noch freundlich sein. Es ist in Ordnung, wenn Sie keine Kommentare schreiben. Es ist besser, bei der Benennung standardisierter vorzugehen.

ps2: In Bezug auf die Unterauftragsmethode fügen einige Leute gerne die Ansichten und die Controller zusammen und unterteilen sie dann entsprechend der Logik weiter. Andere machen es umgekehrt und teilen zuerst die Logik auf dann die Ansichten und Controller. Es scheint keine einheitliche Schlussfolgerung dazu zu geben. Ich persönlich bevorzuge die letztere Methode, daher übernimmt dieses Projekt die letztere Methode.

Derzeit ist nichts in der Datei, verschieben Sie einfach den Tempel in app.component.ts.

Erst die Anforderungen klären und dann mit dem Schreiben des Routers beginnen.

Anforderung: Klicken Sie auf ein beliebiges Element auf der Gundam-Listenseite, um zur Detailseite des Gundam zu springen.

Wenn Sie als Komponente von Angular einen Router auf der Seite verwenden möchten, müssen Sie ihn zunächst in app.module.ts deklarieren.

ps: Das vorherige Geschäft hat nichts mit app.module.ts zu tun, aber das bedeutet nicht, dass es nicht wichtig ist. app.module.ts entspricht der mainifistischen Datei von Android, die das gesamte Projekt koordiniert und verwaltet.

App.module.ts öffnen:

1. Importe: Wird auf der Komponentenseite verwendet zur Basisklasse.

2. Deklarationen: vorhandene benutzerdefinierte Komponentendeklarationen.

3. Bootstrap: Es kann als Hauptstart von Android verstanden werden, dessen Komponente ab dem Start des Projekts eingegeben wird.

Sie müssen es vor der Verwendung des Routers einführen:

import { RouterModule }  from '@angular/router';

Da Sie die forRoot-Methode von RouterModule aufrufen müssen, ist RouterModule.forRoot die im Projekt verwendete Grundklasse , also müssen Sie „Importe“ schreiben.

 imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot()
 ],

RouterModule.forRoot akzeptiert zwei Parameter. Der erste ist das Routenarray, um den Sprung anzuzeigen. Ich weiß nicht, wozu er dient.

Die Routenklasse enthält zwei Schlüsselattribute: Pfad und Komponente. Durch Zugriff auf den Pfad können Sie die eindeutige Komponente finden.

Fügen Sie in forRoot ein Routenarray hinzu, das zwei Komponenten enthält, die Startseite und die Detailseite.

RouterModule.forRoot([
  {
    path: '',
    component: AppComponent
  },
  {
    path: '',
    component: GundamDetailComponent
  }
])

app.module.ts sieht jetzt so aus:

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import { RouterModule }  from '@angular/router';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: '',
        component: AppComponent
      },
      {
        path: '',
        component: GundamDetailComponent
      }
      ])
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Beide Pfade sind noch leer, da noch ein Schlüssel fehlt, und ein Fehler wird gemeldet, auch wenn er geschrieben wird :

Fehler: Der primäre Ausgang zum Laden von „AppComponent“ kann nicht gefunden werden

In Angular muss der Router mit anderen Worten mit der Bezeichnung router-outlet verwendet werden Der Router entscheidet, welche Komponente angezeigt wird, und der Router-Ausgang entscheidet, wo er angezeigt wird.

Tag

<router-outlet></router-outlet>

zur Vorlage in

hinzufügen und dann werden wie erwartet 2 Homepages angezeigt:

app.component.ts ist eine Komponente und eine Seite wird zuerst app.component.ts

所以为了正常显示，也要把主页也单独抽出来。所有组件通过app.component.ts里的来进行加载。而app.component.ts作为整个demo的最外层容器可以进行一些公共的操作（典型：后退动作）。

import {
Component
} from '@angular/core';
import { Gundam } from '../../model/gundam';
import { GUNDAMS } from './../../service/data';
@Component({
  template: `
    <p *ngFor="let gundam of gundams" (click)="onSelected(gundam)">
      <span>
        {{gundam.name}}
      </span>
    </p>
  `
})
export class GundamHostComponent {
  gundam: Gundam = {
    name: '海牛',
    type: 'NewType'
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量
  onSelected (gundam: Gundam): void {
    this.selectedGundam = gundam; // 通过参数赋值
  }
}

{
  path: 'detail',
  component: GundamDetailComponent
}

parseGundamToString(gundam: Gundam): string {
  return gundam.name + '&' + gundam.type;
} // 将gundam类转化为固定格式的字符串

<p *ngFor="let gundam of gundams" routerLink="/detail/name=parseGundamToString(gundam)">
  <span>
  {{gundam.name}}
  </span>
</p>

{
  path: 'detail/:gundam',
  component: GundamDetailComponent
}

import { Component, OnInit } from '@angular/core';

export class GundamDetailComponent implements OnInit {
  selectedGundam: Gundam ;
  ngOnInit(): void {
  }
}

import { ActivatedRoute, Params }  from '@angular/router';

constructor(
private route: ActivatedRoute){}

this.route.params.switchMap((params: Params) => console.log(params))

import 'rxjs/add/operator/switchMap';

(params: Params) => this.gundamStr = params['gundam']

function(params){
  this.gundamStr = params['gundam']
}

parseStringToGundam(str: string): Gundam {
  const temp = str.split('&');
  const tempGundam: Gundam = {
  name: temp[0],
  type: temp[1]
  };
  return tempGundam;
}

ngOnInit(): void {
  this.route.params // 通过注入的方式拿到route里的参数params
  .switchMap((params: Params) => this.gundamStr = params['gundam']) // 通过参数拿到gundam字符串并付给detail里的一个临时变量
  .subscribe(() => this.selectedGundam = this.parseStringToGundam(this.gundamStr)); // 通过反格式化函数解析临时变量并返回给作为显示的model
}

import {
NgModule
} from '@angular/core';
import { RouterModule }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: GundamHostComponent
      },
      {
        path: 'detail/:id',
        component: GundamDetailComponent
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule // 调用路由
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent,
    GundamHostComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import {
NgModule
} from '@angular/core';
import { RouterModule, Route }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
const routes: Route[] = [
  {
    path: '',
    component: GundamHostComponent
  },
  {
    path: 'detail/:gundam',
    component: GundamDetailComponent
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von Routern in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!