如何从父组件获取RouteParams？
App.ts:
@Component({
...
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/:username/...', component: ParentComponent, as: 'Parent'}
])
export class HomeComponent {
...
}
然后,在中ParentComponent,我可以轻松获取用户名参数并设置子路由.
Parent.ts:
@Component({
...
})
@RouteConfig([
{ path: '/child-1', component: ChildOneComponent, as: 'ChildOne' },
{ path: '/child-2', component: ChildTwoComponent, as: 'ChildTwo' }
])
export class ParentComponent {
public username: string;
constructor(
public params: RouteParams
) {
this.username = params.get('username');
}
...
}
但是,如何在这些子组件中获得相同的"用户名"参数？做与上面相同的技巧,不会这样做.因为这些参数是在ProfileComponent中定义的还是什么？
@Component({
...
})
export class ChildOneComponent {
public …我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？
现在我这样做:
<a [routerLink]="['/Profile/Feed', {username: username}]"
[ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
Feed for {{username}}
</a>
在我的组件内:
getLinkStyle(path:string):boolean {
console.log(this._location.path()); // logs: '/profile/john_doe/feed'
return this._location.path() === path;
}
这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？
如何使用组件内的@Input值执行某些操作？
例如:
<log-user [user]="user"></log-user>
我们假设这user是一个对象.现在,我知道如何在te log-user模板中传递这个用户数据,但是如何user在其组件内部执行此操作？
LogUserComponent:
@Component({
selector: 'log-user',
template: `
This works: {{user}}
`
})
export class LogUserComponent {
@Input() user:any;
constructor() {
// this get's logged as undefined??
console.log(this.user);
}
}
任何帮助都会很棒!! 提前致谢!
已经和Angular v1合作已经有一段时间了,自从Angular v2进入测试版以来,我一直在玩这个游戏.
现在我已经有了这段代码,但无法让它工作,真的不知道为什么.不知何故,当我打印{{profileUser | json}}一切正常(profileUser是一个对象).
但是当我想打印该对象的子项时(例如{{profileUser.name}}或{{profileUser.name.firstName}}),Angular会抛出以下错误:
EXEPTION: TypeError: undefined is not an object (evaluating 'l_profileUser0.name') in [ {{profileUser.name}} in ProfileComponent@4:11.
这对我来说真的很混乱,应该只是最简单的事情之一..刚开始使用TypeScript btw ..
这是一些代码 - ProfileService.ts:
import { Injectable } from 'angular2/core';
import { Headers } from 'angular2/http';
import { API_PREFIX } from '../constants/constants';
import { AuthHttp } from 'angular2-jwt/angular2-jwt';
import 'rxjs/add/operator/map';
@Injectable()
export class ProfileService {
API_PREFIX = API_PREFIX;
constructor(private _authHttp:AuthHttp) {
}
getProfileData(username:string):any {
return new Promise((resolve, reject) => …所以我在AuthenticationService中有以下代码.检查登录凭据后,用户将被重定向到其配置文件:
authentication.service.ts:
redirectUser(username:string):void {
// Redirect user to profile on successful login
this.router.navigate(['../Profile/Feed', {username: username}]);
}
这一切都很好,但自从我在里面引入了一些子路由后ProfileComponent,我遇到了一些错误.首先,这是我的AppComponent与RouteConfig:
app.ts:
import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {HomeComponent} from '../home/home';
import {AuthenticationService} from '../../services/authentication.service';
import {LoginComponent} from '../login/login';
import {ProfileComponent} from '../profile/profile';
import {ProfileService} from '../../services/profile.service';
@Component({
selector: 'app',
viewProviders: [AuthenticationService, ProfileService, HTTP_PROVIDERS],
encapsulation: ViewEncapsulation.None,
directives: [
ROUTER_DIRECTIVES
],
templateUrl: './components/app/app.html'
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/inloggen', …我想知道是否可以更改Aurelia中可绑定的名称(HTML中的属性名称).由于我们在当前项目中使用的编码标准,我们使用的属性名称非常难看,例如:m-data="someData".我们为所有班级成员加上前缀m.我知道我可以在课堂上使用它,所以自定义元素名称是可自定义的,但我也可以为bindables做这个吗？
例如:
// my-component.js
// I can use a decorator here to
// change the custom element name, which is great!
@customElement('my-component')
export class clsMyComponent {
@bindable mData;
}
其结果如下:
<!-- index.html -->
<my-component m-data.bind="someData"></my-component>
所以我想做但不起作用的是:
@customElement('my-component')
export class clsMyComponent {
@bindable({name: 'data'}) mData;
}
我在这上面找不到任何东西,我知道你可以设置像双向绑定,默认值等的东西.但是这个名字不对吗？任何帮助,将不胜感激!