angular2 子路由怎么给父路由传递数据

父路由、子路由之间插一层服务用于数据共享。

在接收值得组件里面导入ActivatedRoute

路由设置页面传参

{ path: 'view/:mid' , component: ViewComponent},

父级页面路由跳转的实现

<div [routerLink]="['/email/view',mailid]">页面跳转传值</div>

子页面的Component通过下面的方法可以获取到父页面路由传过来的参数<b>mailid</b>

//

import { Component, OnInit } from '@angular/core';

import {ActivatedRoute} from "@angular/router";

@Component({

selector: 'app-view',

templateUrl: '/viewcomponenthtml',

styleUrls: ['/viewcomponentscss']

})

export class ViewComponent implements OnInit {

constructor(public route: ActivatedRoute) {

//通过这种形式来接收父级页面传过来的值

thisrouteparamssubscribe(data=>consolelog(datamid))

//或者通过

thisrouteparams['value']['mid']

}

ngOnInit() {

}

}

因为AngularJs用的人不多，我发现网上关于这方面的文章不多，所以我分享一下在AngularJs中是如何调用和接收的。

<app-dialog></app-dialog>其中dialog是子页面文件夹的名字，只需要把这个标签放在父页面中需要的地方即可。[sessionId]='sessionId'，sessionId是父页面中的值，需要传到子页面中去的，父页面中的sessionId是需要定义的，而子页面需要这样来接收父页面中的sessionId，

'#dialogfile'相当于给子页面添加了一个id，在父页面中可以直接通过这个id来接收子页面的值和调用子页面的方法(如果是调用子页面的方法的话，方法名后面是需要加括号的)，在父页面中需要这样来定义，

最后是子页面调用父页面的方法。

其中'this'指的就是父页面，而[parent]则是需要在子页面定义的一个名字可以随意更改，

记住调用父页面的方法，方法名后面是需要加括号的，如果有参数的话，直接写在括号里面就好。

$scope$watch($rootScopexxx,function(newVal,oldVal){

//do something

})

马上就有人问为什么不是:

$rootScope$watch("xxx",function(newVal,oldVal){

//do something

})

从我最近的一个bug来说说为什么要用第一种方式。

逻辑如图，一开始我使用了 $rootScope$watch 的写法。因为 angularjs 在 $rootScope 上的 watch 一旦注册全局有效。而我的这个全局变量恰好是订单信息，也就是说不同的 controller 对他都是有改动的，每一次改动就会触发 $rootScope$watch 进入别的 controller。可以类比看一下 $rootScope 上的 $broadcast 会全局出发的。

其实这并不是唯一的方式，查一下angular 源码不难找到 watch 方法源码不分有如下代码：

return function deregisterWatch() {

if (arrayRemove(array, watcher) >= 0) {

incrementWatchersCount(scope, -1);

}

lastDirtyWatch = null;

};

这段代码告诉我们，手动清理 watch 是可行的。例如：

var watcher = $rootScope$watch("xxx",function(){});

//手动清除 watcher

watcher();

还是很简单对吧，以上方法同样可以用于 scope 上的 watch。

研究到这里的时候，觉得有点问题，那我在 $scope 会被清理么？于是呼，继续翻源码，我在 $destroy 方法里面找到如下代码：

// Disable listeners, watchers and apply/digest methods

this$destroy = this$digest = this$apply = this$evalAsync = this$applyAsync = noop;

this$on = this$watch = this$watchGroup = function() {

return noop;

};

this$$listeners = {};

首先，确实是可以通过$eventtarget参数来拿对象的，拿到的对象可像 *** 作jquery元素一样 *** 作，所以子集、父级、同级都可以随意转换。

但是，并不推荐这种做法，angular存在的目的就是避免对dom元素的直接 *** 作，你的这个需求，推荐考虑一下办法实现：

data-str里面的东西写到ngClick参数中，如<div ng-click="fun('abc')">，这样fun()直接获取到abc参数，简单明了，可读性和可维护性也更强；

封装一个directive，通过link(scope, element, attrs)获取data-str参数，同时亦可以对dom直接进行 *** 作，可定制性更强，适合高级需求，但至少我从题主的例子里面看不出。

父子组件的传值，是mvvm框架中必然绕不过去的话题，下面列举在angular中父子组件传值的各种方式。

即带有@Input装饰器，如下面两种方式：

父组件在引用子组件的标签的时候，通过 [ ] 符号将父组件的变量名赋值给该变量；

子组件通过在变量名前面加上@Input装饰器的方式，可以从父组件取值，实现父子组件的传值。

在第一种方案的基础上，使用一个输入属性setter，以拦截父组件中值的变化，并采取行动。

通过OnChanges生命周期钩子接口的ngOnChanges()方法来检测输入属性值的变化并做出回应。

子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性emits（向上d射）事件，父组件绑定这个事件属性，并在事件发生时做出回应。

子组件的EventEmitter属性是一个输入属性，通常带有@Output装饰器。

子组件：

父组件绑定一个事件处理器，用来响应子组件的事件。d射出的事件，直接写在父组件引入子组件的位置上。

父组件不能使用数据绑定来读取子组件的属性或者调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。

本地变量的写法是（# + 变量名）

在父组件中，把本地变量（#timer）放到子组件标签（<countdown-timer>）中，用来代表子组件，该父组件模板就得到子组件的引用，可以在父组件模板访问子组件的属性和方法。

上面那种本地变量的方式，有局限性，只能在父组件的模板中使用。如果在父组件的类中读取子组件的属性方法，就不能使用本地变量了。

当父组件类需要这种访问时，可以把子组件作为ViewChild，注入到父组件中。

首先，你必须导入对装饰器 ViewChild 以及生命周期钩子 AfterViewInit 的引用。

接着，通过 ViewChild 属性装饰器，将子组件 CountdownTimerComponent 注入到私有属性 timerComponent 里面。

ngAfterViewInit() 生命周期钩子是非常重要的一步。被注入的计时器组件只有在 Angular 显示了父组件视图之后才能访问所以需要加上setTimeout()来等下一轮。

不会！rxjs看不懂！！！

不过可以通过redux存在统一的store树里面，增删改查都从这里取，变相实现传值。

1, 如果你的$scope是从paren传过来的话（不是新建的scope），那d窗的内容应该可以拿到父窗口的数据。

2，如果你还需要传其它数据到d窗里去，建议你新起一个共用的dataService文件，把这个dataService分别注进父窗口和d窗中，在d窗之前先用父窗口在dataService里set好数据，然后再在d窗里面通过dataService拿来用，这样可以达到父子窗口之间传数据的目的。

以上就是关于angular2 子路由怎么给父路由传递数据全部的内容，包括:angular2 子路由怎么给父路由传递数据、在AngularJs中父子页面如何相互调用方法和接收值、angularjs指令怎么更新父作用域的变量等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！