(四)、Angular4.0 路由基础

电玩女神 2022-05-28 00:37 141阅读 0赞

**一、新建一个angular路由项目 router**

ng new router --routing

**二、生成三个组件**

ng g component home
    ng g component product
    ng g component code404

**三、home.component.html**

<p>
      这里是主页组件
    </p>

**四、product.component.html**

<p>
      这里是商品信息组件
    </p>

**五、code404.component.html**

<p>
      页面不存在
    </p>

**六、app.component.html**

<a [routerLink]="['/']">主页</a>
    <a [routerLink]="['/product']">商品详情页</a>
    <input type="button" value="商品详情" (click)="toProductDetails()"/>
    <router-outlet></router-outlet>

**七、配置路由 app-routing.module.ts**

import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import {HomeComponent} from './home/home.component';
    import {ProductComponent} from './product/product.component';
    import {Code404Component} from './code404/code404.component';
    
    const routes: Routes = [
      {path: '', component: HomeComponent},
      {path: 'product', component: ProductComponent},
      {path: '**', component: Code404Component}
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }

**八、app.component.ts**

import { Component } from '@angular/core';
    import {Router} from '@angular/router';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app works!';
    
      constructor(private router: Router) {
    
      }
    
      toProductDetails() {
        this.router.navigate(['/product']);
      }
    
    }

**九、npm run start 启动项目，测试两个连接一个按钮和错误的url地址**

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 路由

`index.html` 下添加`<base>` 元素，告诉路由器该如何合成导航用的URL <base href="/">复制代码新建angular项目时...

柔光的暖阳◎/ 2024年04月17日 13:49/ 0 赞/ 6 阅读

相关 angular 嵌套路由

mylogin.component.ts import { Component, OnInit } from '@angular/core'; @C

桃扇骨/ 2022年06月01日 07:00/ 0 赞/ 204 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 249 阅读

相关 Angular4--路由基础

【背景】最近在学习Angular，迫不及待的想把学习到的内容跟大家分享。【内容】 1.实现一个简单的路由（1）使用angular-cli创建一个带路由的项目

素颜马尾好姑娘i/ 2022年06月01日 00:23/ 0 赞/ 161 阅读

相关 (四)、Angular4.0 路由基础

一、新建一个angular路由项目 router ng new router --routing 二、生成三个组件 ng g component home

电玩女神/ 2022年05月28日 00:37/ 0 赞/ 142 阅读

相关 Angular 路由 ( 二 )

Angular 路由 ( 二 ) > 应用有一个`配置过的路由器`。外壳组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。它还有一些 `Router

我不是女神ヾ/ 2022年05月24日 12:43/ 0 赞/ 230 阅读

相关 Angular 路由(一)

Angular 路由一描述路由 Angular 是一个单页面的应用所有的页面展示都在本页面内完成。我们实现页面局部刷新展示一个班级的学生信息时， 1.

电玩女神/ 2022年05月23日 05:25/ 0 赞/ 175 阅读

相关 Angular 路由⑦要素

[![返回主页][logo.gif]cnzt][logo.gif_cnzt] /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f

╰半橙微兮°/ 2022年01月05日 09:11/ 0 赞/ 263 阅读

相关 Angular 学习（五）：Angular 路由（Route）

Angular 路由（Route）我们可以将路由器理解成控制整个应用状态的视图对象，每个应用都有一个路由器；路由器的另一个作用是为每个视图分配唯一的 url，可以

深藏阁楼爱情的钟/ 2021年09月29日 01:48/ 0 赞/ 406 阅读

相关 Angular--路由的基础知识

前言我们经常可以听到路由器，通过路由器我们可以连接wifi上网。今天我总结的这个路由跟路由器不是一个类型的，这个路由指的是路径，而非器材内容路由的内容大致有

àì夳堔傛蜴生んèń/ 2021年09月27日 07:48/ 0 赞/ 276 阅读