Angular 路由和傳值

2021-09-29 15:16:15 字數 1596 閱讀 6853

跳轉和傳值

接收

import  from '@angular/core';

import from '@angular/router';

@component()

export class newscontentcomponent implements oninit

ngoninit() )

}}

可以直接在路由之中配置引數

傳參

,
獲取引數

動態路由跳轉,用params,否則用queryparams

import  from '@angular/core';

import from '@angular/router'

@component()

export class newsmsglistcomponent implements oninit

ngoninit() )

}}

3.1 傳值

先引入activatedroute

import  from '@angular/router'
初始化例項router,並獲取傳值

import  from '@angular/core';

import from '@angular/router'

@component()

export class productcontentcomponent implements oninit

ngoninit() )

}}

四、父子路由

import  from '@angular/core';

import from '@angular/router';

import from './component/home/home.component';

import from './component/home/welcome/welcome.component';

import from './component/home/setting/setting.component';

import from './component/product/product.component';

import from './component/product/pcate/pcate.component';

import from './component/product/plist/plist.component';

const routes: routes = [

// 首頁路由

, ,,]

},// 產品路由

, ,,]

},,];

@ngmodule()

angular路由傳參

product?id 1 name 2 資料的接收 在路由的目標元件中,可以通過以下方式獲得資料 activatedroute.queryparams id acitvatedroute.queryparams name 定義路由路徑時,指定引數的名字 在實際的路徑中攜帶這個引數 product 1...

Angular元件傳值

父元件中,通過 屬性 值 的方式向子元件傳值 msg 子元件中,要用 inputs 屬性 來接收引數 並且angular裡,子元件可以直接修改父元件傳來的值 component export class childcomponent implements oninit ngoninit privat...

Angular 元件傳值

在父元件ts中定義要傳遞的資訊 在父元件html中的子元件標籤中定義自定義屬性來繫結父元件定義的資訊 在子元件中的ts中,通過 input來接收自定義屬性的名稱 在子元件中的html中就能直接得到值了 father to child 方法一 output 在子元件中匯入output 和 evente...