Simple use of Angular4 study notes router

This article mainly introduces the simple use of Angular4 study notes router. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

router, that is, routing, is a relatively important concept in the front-end. The specific address and the corresponding page are associated and separated through the router to achieve the purpose of decoupling. Create a new detail folder in the src/app directory and create a file named 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: Regarding naming, basically the naming method of xxx “-” “business type” “component type” is used, at least that’s how it is in the official documents recommended. Of course, you can also name the component Zhutou San, but standard naming can increase the readability of the component. Even if you don't mind naming random maintainers, no one can be sure that they won't refactor the same piece of code again in a long time. Therefore, you still have to be kind. It’s okay if you don’t write comments. It’s better to be more standardized in naming.

ps2: Regarding the subcontracting method, some people like to put the views together and the controllers together, and then further subdivide them according to the logic; some people do it the other way around, dividing the logic first and then the views and controllers. There seems to be no unified conclusion on this. I personally prefer the latter method, so this project adopts the latter method.

There is nothing in the file at present, it is just a simple move of the temple in app.component.ts.

First clarify the requirements, and then start writing the router.

Requirements: Click on any item in the gundam list page to jump to the gundam details page.

As an angular component, if you want to use router in the page, you must first declare it in app.module.ts.

ps: The previous business has nothing to do with app.module.ts, but this does not mean that it is not important. app.module.ts is equivalent to the mainifist file of Android, which coordinates and manages the entire project.

Open app.module.ts:

1. ##imports: In the component Basic classes are used in the page.

2. declarations: Existing custom component declarations.

3. bootstrap: It can be understood as Android's main launch, which component is entered from when the project starts.

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

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

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

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 {}

<router-outlet></router-outlet>

app.component.ts ##Then 2 homepages are displayed as expected:

is a component and a page, angular First, enter app.component.ts from bootstrap to render the interface (that is, the part above router-outlet). I went to find the router again and found that the corresponding router also had components, so I loaded it again. So in order to display it normally, the homepage must also be extracted separately. All components are loaded through

. As the outermost container of the entire demo, app.component.ts can perform some common operations (typical: back action). Create a new host package under src and a new gundam-host.component.ts file.

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: &#39;海牛&#39;,
    type: &#39;NewType&#39;
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量
  onSelected (gundam: Gundam): void {
    this.selectedGundam = gundam; // 通过参数赋值
  }
}

app.component.ts Only keep the tags and remove everything else.

Modify the

file, import gundam-host.component.ts and add GundamHostComponent to the component declaration declarations.

修改route里的path所指向的component，默认进入后显示主页组件：

{
  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 {
}

The above is the detailed content of Simple use of Angular4 study notes router. For more information, please follow other related articles on the PHP Chinese website!