美文网首页
Angular4路由几步走

Angular4路由几步走

作者: 南蓝NL | 来源:发表于2017-11-21 22:35 被阅读0次
点进来之前.png

效果如图,就是能够点击商品名字看到每个商品对应的详情页面

配置productDetail组件

ng g component productDetail

在productdetail.component.ts获取传进来的商品标题

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router"
@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css']
})
export class ProductdetailComponent implements OnInit {
  productTitle:string;
  constructor(private routeInfo: ActivatedRoute) { }
  ngOnInit() {
   //快照
    this.productTitle = this.routeInfo.snapshot.params["productTitle"]
  }
}

在productDetail.component.html显示商品详情的内容,图片是定死的

<div>
  <img src="http://via.placeholder.com/350x150">
  <h4>{{productTitle}}</h4>
</div>

在app.moudles.ts里面配置路由

const routeConfig:Routes = [
  {path:'',component:HomeComponent},
  {path:'product/:productTitle',component:ProductdetailComponent}
]
imports: [
    BrowserModule,
    //注入路由配置
    RouterModule.forRoot(routeConfig)
  ]

在app.component.html定义好插座

<app-navbar></app-navbar>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
       <router-outlet></router-outlet>
    </div>
  </div>
</div>

在product.component.html里面设置路由链接

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img [src]="imgUrl">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a [routerLink]="['/product',product.title]">{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
  </div>
</div>
点进来之后.png

相关文章

  • Angular4路由几步走

    效果如图,就是能够点击商品名字看到每个商品对应的详情页面 配置productDetail组件 在productde...

  • 走几步

    宅在家里走上几步 显示在微信里 证明 自己一切安好。 在这非常时刻 无需更多信息 只要证明 自己还正常。 无需更多...

  • Angular4 路由进阶(一)

    路由是什么(what) 在web开发中,路由是指将应用划分成多个分区,通常是按照从浏览器的URL衍生出来的规则进行...

  • Angular4总结(二)—— 路由

    路由知识总结 可以把SPA(single page application)理解为是一个视图状态的集合。Angul...

  • ionic 懒加载

    与angular4的路由懒加载对比 ionic只能对每个页面进行单独配置,不能一次性在功能模块中配置 页面与组件的...

  • 小米路由器Mini折腾合集

    刷入 Openwrt 小米路由器要刷openwrt的话,主要分成以下几步: 首先去小米路由器官网下载最新的开发版固...

  • 1

    按揭贷款拆成几步走

  • 在禄口,机场

    多走几步就辜负了秦淮多,走几步就换掉青砖黛瓦飞机打着哈欠噢,听说今天有暴雨我们还走不走

  • 谁比谁凄凉

    我走快几步, 你走慢几步。 我转身看到悬崖, 你抬首望穿银河。 谁比谁壮观, 谁比谁凄凉。

  • 小巷

    小巷以前很长 长到让人觉得有点远 远到走几步跑几步才能来到巷中间 小巷以前很长 长到巷头巷尾是两个世界 就连走几步...

网友评论

      本文标题:Angular4路由几步走

      本文链接:https://www.haomeiwen.com/subject/josgvxtx.html