我正在编写一个具有属性的Angular组件Mode(): string.我希望能够以编程方式设置此属性,而不是响应任何事件.问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新.有没有办法手动触发此更改检测？
为什么这个组件在这个简单的插件中
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message:string = 'loading :(';
ngAfterViewInit() {
this.updateMessage();
}
updateMessage(){
this.message = 'all done loading :)'
}
}
投掷:
例外:App @ 0:5'中的表达式'我'{{message}}在检查后发生了变化.上一个值:'我正在加载:('.当前值:'我已经完成了加载:)'在[我是{{message}}在App @ 0:5中]
什么时候我正在做的是在我的视图启动时更新一个简单的绑定？
我最近更新到新的RC3和Router3alpha,似乎有些事情发生了变化.
我注意到单击活动路径的链接不再导致重新加载组件.如何使用新的router3实现此行为？
我的链接看起来像
<a [routerLink]="['/link1']">Link1</a>
为了测试我只是在ngOnInit中使用了一个随机数:
export class LinkoneComponent implements OnInit
{
public foo: number;
constructor() {}
ngOnInit()
{
this.foo = Math.floor(Math.random() * 100) + 1;
}
}
在路由之间切换时它可以正常工作,但是单击当前活动的路由不会导致组件的重新加载.
我正在创建一个调用Facebook javascript api的Facebook服务,并且想知道如何在我的值更新时最好地实现更改检测.
我有一个UserService具有currentUser属性,它是一个BehaviorSubject:
currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));
而当我想以响应的JavaScript SDK告诉我,在用户登录或注销Facebook的更新用户,我更新,需要调用tick()上ApplicationRef:
updateUser(user: User) {
console.log('UserService.updateUser:', user);
this.currentUser.next(user);
this.appRef.tick(); // UI does not update without this
}
constructor(facebook: Facebook) {
this.facebook.facebookEvents.filter(x => x != null
&& x.eventName == 'auth.authResponseChange')
.subscribe((event) => {
this.updateUser(new User(event.data));
}
}
在我的组件中,我在构造函数中存储来自用户服务的'currentUser'并绑定到value属性:
<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? <img src="{{currentUser.value.profilePicUrl}}"></p>
难道我做错了什么？有没有比从外部库触发更改后调用ApplicationRef.tick()更好的方法？
我尝试使用NgZone并且不起作用,使用不同的事件返回Feed中的帖子作为服务页面通过它们:
constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)
...
this.postsSubject.subscribe((post) => …尝试在窗口上渲染窗口大小,通过使用async管道的角度2组件中的流调整大小:
<h2>Size: {{size$ | async | json}}</h2>
const windowSize$ = new BehaviorSubject(getWindowSize());
Observable.fromEvent(window, 'resize')
.map(getWindowSize)
.subscribe(windowSize$);
function getWindowSize() {
return {
height: window.innerHeight,
width: window.innerWidth
};
}
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Size: {{size$ | async | json}}</h2>
</div>
`,
directives: []
})
export class App {
size$ = windowSize$.do(o => console.log('size:', o));
constructor() { }
}
但该组件仅呈现初始状态并忽略流更新.如果您打开控制台,在窗口调整大小时,您将看到来自同一个流的更新.
无法理解我在这里缺少什么.
这是一个吸烟者
我有三个组件,每个组件都有自己的解析器,可以从不同的API中获取数据.为此,这些组件依赖于使用服务在它们之间共享的URL.
我希望当对该URL发生更改时,每个组件都会重新加载,即重新启动解析器.
我看了几个相关的SO问题,但没有提到在使用解析器时如何这样做,cf:问题1,问题2,问题3
我可以想到两种方式:
脏方法:使用路由器重定向和空白组件强制刷新组件.
this.router.navigateByUrl('blank',true);
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)');
但那没用.有一个刷新,但解析器没有......解决.
另一种方法:使用BehaviorSubject或ChangeDetectorRef.但是,我对如何实现它一无所知,考虑到检测到组件内的变化无法帮助我实际重启解析器.
我的感觉是,这必须通过路由器以某种方式完成,因为它是了解解析器的人:
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
children : [
{
path: '',
component: BlankComponent
},
{
path: 'simil',
component: SwComponent,
outlet: 'sw',
resolve: {
data: SwResolve
}
},
{
path: 'sales',
component: SalesComponent,
outlet: 'sf',
resolve: {
data: SalesResolve
}
}
]
},
{
path: 'blank',
component: BlankComponent
}
];
有关如何实现这一目标的任何提示？
编辑:这是相关的plunkr …
有没有一种方法可以手动重新渲染组件，例如当用户单击按钮时？
我已经看到了类似的帖子，但没有这些工作对我来说，例如这里
例如，
renderComponent() {
// force component re-render
}