Angular Routing

1. 创建 Routing 模块

貌似目前 routing 还没有一个统一的方法,只能按教程上的临时方式实现。

$ ng generate module app-routing --flat --module=app
CREATE src/app/app-routing.module.spec.ts (308 bytes)
CREATE src/app/app-routing.module.ts (194 bytes)
UPDATE src/app/app.module.ts (535 bytes)
1
2
3
4
  • 路由模块会自动添加到 app.module.ts@NgModule({imports[]... 中。

2. 实现 app-routing 模块代码

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
    {path: "register", component: RegisterComponent },
    {path: "login", component: LoginComponent },
    {path: "", component: LoginComponent },
]
@NgModule({
    imports: [ RouterModule.forRoot(routes)],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 在根模块中应用

app.component.html 中添加 <router-outlet></router-outlet>

4. 在其他组件中使用

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  user: User;

  constructor(private userService: UserService, private router: Router) { }

  ngOnInit() {
    this.user = new User();
  }

  doRegister(){
    this.userService.register(this.user).subscribe(data => {
      if (data.status == "okay"){
        this.router.navigate(["login"]);  //举例
      }
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5. 在页面中使用

<a routerLink="/register">Register</a>
1
最近更新: 10/9/2018, 10:42:31 PM