我目前正在尝试使用angular2(beta1),我对新路由器有点疑惑.
通过router.navigate导航就像一个魅力,而尝试通过注册路由的正常链接来刷新页面.当然,这与PathLocationStrategy一起发生,因为HashLocationStrategy按预期工作.
这是一个错误还是正常行为？
TIA
我制作了一个组件,其中我有一个输入字段和按钮.单击按钮我正在绘制第二个组件.我想将数据从一个组件发送到另一个组件？
我将如何将数据从一个组件发送到另一个组件.我需要发送输入值(输入字段中的用户类型)我需要在下一个组件或下一页显示.单击按钮.如何发送数据？这是我的傻瓜 http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview
import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';
@Component({
templateUrl: 'home/home.html'
})
export class AppComponent {
toDoModel;
constructor(private _router:Router) {
}
onclck(inputValue){
alert(inputValue)
this._router.navigate(['Second']);
}
}
angular2-directives angular2-template angular2-routing angular
在agnular2中是否有api允许传递json对象而不是字符串值.例如,Router.navigate()我可以传递路由参数
Router.navigate('routename',[{key:stringvalue}])
并可以使用RouteParams.get(key) : string.但这只返回字符串值.我需要传递json对象.
感谢任何指针
如何在angular2中重新加载页面.
在通过网络搜索时,我得到了一个"this._router.renavigate()"重新加载页面的代码,但看起来它不适用于最新版本的angular2.
另一种方式是,'window.location.reload()'但这不是有角度的方式.
如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作.plunker代码显示工作链接和非工作链接.先感谢您.以下是不起作用的链接.
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'my-menu',
template: `
<div>
<a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> |
<a routerLink="/comp12" routerLinkActive="active">Heroes</a> |
<a routerLink="/comp21" routerLinkActive="active">Heroes</a> |
<a routerLink="/comp22" routerLinkActive="active">Heroes</a>
</div>
`,
})
export class AppLayout {}
为什么ActivatedRoute在@angular\router params is observable？
我想知道为什么我需要订阅Params？为什么params是异步的,是否会出现路由的组件但是params仍然没有填充？
有没有办法在没有的情况下获得价值observable？
我是ngrx/store的初学者,这是我使用它的第一个项目.
我已经使用ngrx/store成功设置了我的角度项目,并且我可以在初始化主要组件后调度一个加载操作,如下所示:
ngOnInit() {
this.store.dispatch({type: LOAD_STATISTICS});
}
我已设置一个效果,以便在调度此操作时加载数据:
@Effect()
loadStatistik = this.actions.ofType(LOAD_STATISTICS).switchMap(() => {
return this.myService.loadStatistics().map(response => {
return {type: NEW_STATISTICS, payload: response};
});
});
我的减速机看起来像这样:
reduce(oldstate: Statistics = initialStatistics, action: Action): Statistik {
switch (action.type) {
case LOAD_STATISTICS:
return oldstate;
case NEW_STATISTICS:
const newstate = new Statistics(action.payload);
return newstate;
....
虽然这有效,但我无法理解如何使用路由器防护,因为我目前只需要调度一次LOAD_ACTION.
此外,组件必须调度LOAD操作,加载初始数据对我来说听起来不对.我希望商店本身知道它需要加载数据,我不必先调度一个动作.如果是这种情况,我可以删除组件中的ngOnInit()方法.
我已经查看了ngrx-example-app,但我还没有真正了解它是如何工作的.
编辑:
添加一个返回ngrx-store observable的解析防护后,该路由不会被激活.这是决心:
@Injectable()
export class StatisticsResolver implements Resolve<Statistik> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Statistik> {
// return Observable.of(new Statistik());
return this.store.select("statistik").map(statistik => {
console.log("stats", statistik); …我定义了以下路线:
export const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuardService] },
{ path: 'sites', component: SiteIndexComponent, resolve: { siteSummaries: SiteSummariesResolve }, canActivate: [AuthGuardService] },
{ path: 'qa-tasks', component: QaTaskIndexComponent, resolve: { investigations: InvestigationsResolve, reviews: ReviewsResolve }, canActivate: [AuthGuardService] },
{ path: 'error', component: ErrorComponent },
{ path: '**', redirectTo: '' }
];
我的应用程序的用户根据他们的角色看到完全不同的页面,包括他们的"登陆"(主页)页面.我正在使用我的HomeComponent根据以下角色将用户路由到正确的登录页面:
export class HomeComponent implements OnInit {
private roles: any;
constructor(private router: Router,
private authService: AuthService) { }
ngOnInit() {
var currentUser …如果用户从具有脏表单的页面导航,我成功使用canDeactivate提供警告消息:
我正在使用的代码在这里:
is_submit = false;
canDeactivate() {
//https://scotch.io/courses/routing-angular-2-applications/candeactivate
if (this.myForm.dirty == true && this.is_submit==false){
return window.confirm('Discard changes?');
} //end if
return true
} // end canDeactivate
这是我得到代码的地方:
https://scotch.io/courses/routing-angular-2-applications/candeactivate
但是我想使用angular2对话框.这是我的代码:
//ts for the main component
is_submit = false;
canDeactivate() {
if (this.myForm.dirty == true && this.is_submit==false){
const config = new MdDialogConfig();
config.disableClose=true;
let dialogRef = this.dialog.open(DialogCanDeactive,config);
dialogRef.afterClosed().subscribe(result => {
if (result=='cancel'){
return false;
}
if (result=='save'){
return true;
}
if (result=='discard'){
return true;
}
}); //end dialogRef
} //end if
return …如何更有效地使用路由器 Observables？例如，如果我需要加载单个路由参数（假设我们有一个类似的路由/some-resource/:id），我需要订阅路由器事件，然后订阅路由参数以获取值。这需要两次订阅和两次取消订阅。
我想要：
样本
export class SomeComponent implements OnInit, OnDestroy {
private routerSub: Subscription;
private routeSub: Subscription;
someResource: Observable<SomeResourceType>;
constructor(private someService: SomeService,
private route: ActivatedRoute,
private router: Router) {
this.routerSub = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.routeSub = this.route.params.subscribe((params) => {
if (params['id']) {
this.someResource = this.someService.findById(params['id']);
// will access the resource using async pipe later
}
});
}
});
}
ngOnInit(): void {
}
ngOnDestroy(): void {
this.routerSub.unsubscribe();
this.routeSub.unsubscribe();
}
} …