(精华2020年6月10日更新)Angular实战篇路由的传参

最新推荐文章于 2024-07-30 09:32:43 发布

2b勿扰

最新推荐文章于 2024-07-30 09:32:43 发布

阅读量1.7w

点赞数 2

分类专栏： (持续更新)angular实战篇文章标签： angular

本文链接：https://blog.csdn.net/weixin_41181778/article/details/106654385

版权

本文详细介绍了在Angular中实现路由传参的两种方法，包括通过HTML模板和TypeScript进行参数传递，并展示了子组件如何接收到这些参数。

摘要由CSDN通过智能技术生成

第一种
html

<!-- sss?aid=1 -->
<ul>
    <li *ngFor="let item of newsList; let key = index;">
        <a [routerLink]="['/newsdetail']" [queryParams]="{aid:item.id}">{
   {
   key}}--{
   {
   item.name}}</a> 
    </li>
</ul>


<button type="button" (click)="gotoDetail($event)" tag='1'>新闻详情</button>

import {
    Component, OnInit } from '@angular/core';
import {
    Router } from '@angular/router';
@Component({
   
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
   
  public newsList: any[] = [{
   
    id