我有一个带有一个routerLink的导航栏组件
<p>
<a routerLink="/user">User</a>
</p>
以及要向其传递值的UserComponent下的嵌套组件
@Component({
selector: 'app-user',
template: `
<input #box (keyup.enter)="onEnter(box.value)">
<div *ngIf="box.size > 0">
<app-order [value]="value"></app-order>
</div>`
})
export class UserComponent implements OnInit {
value = '';
onEnter(value: string) {
this.value = value;
}
constructor() {
}
ngOnInit() {
}
}
OrderComponent
@Component({
selector: 'app-order',
template:`{{id}}`
})
export class OrderComponent implements OnInit {
@Input() id:String;
constructor() { }
ngOnInit() {
}
}
现在,当我输入用户链接时,将获得包含链接和传递值的视图。当我再次单击链接时,我得到的页面具有价值。如何更改此行为,以便再次单击“路由”按钮时得到的输入内容没有传递值?
答案 0 :(得分:0)
当单击导航栏上与其相关的按钮时尝试刷新页面时,遇到了相同的问题。
Angular指出,由于应用程序的状态由其当前URL表示,因此在相同URL上的导航无效。
有一个解决方法:onSameUrlNavigation
不幸的是,此选项仅允许保护者和解析器在导航到相同URL时再次运行,因此,如果激活它,您将发现...什么都没有!
所以我用此类创建了自己的解决方法:
/**
* Abstract class that allows derived components to get refreshed automatically on route change.
* The actual use case is : a page gets refreshed by navigating on the same URL and we want the rendered components to refresh
*/
export abstract class AutoRefreshingComponent implements OnInit, OnDestroy {
public routerEventsSubscription: Subscription;
protected router: Router;
constructor() {
this.router = AppInjector.get(Router);
}
/**
* Initialization behavior. Note that derived classes must not implement OnInit.
* Use initialize() on derived classes instead.
*/
ngOnInit() {
this.initialize();
this.routerEventsSubscription = this.router.events.filter(x => x instanceof NavigationEnd).subscribe(res => {
this.initialize();
});
}
/**
* Destruction behavior. Note that derived classes must not implement OnDestroy.
* Use destroy() on derived classes instead.
*/
ngOnDestroy(): void {
this.routerEventsSubscription.unsubscribe();
this.destroy();
}
/**
* Function that allows derived components to define an initialization behavior
*/
abstract initialize(): void;
/**
* Function that allows derived components to define a destruction behavior
*/
abstract destroy(): void;
}
AppInjector引用此:
import {Injector} from '@angular/core';
/**
* Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
* `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
* of the service).
*/
export let AppInjector: Injector;
/**
* Helper to access the exported {@link AppInjector}, needed as ES6 modules export
* immutable bindings; see http://2ality.com/2015/07/es6-module-exports.html
*/
export function setAppInjector(injector: Injector) {
if (AppInjector) {
// Should not happen
console.error('Programming error: AppInjector was already set');
}
else {
AppInjector = injector;
}
}
在您的AppModule中:
import { setAppInjector } from './app.injector';
// ...
export class AppModule {
constructor(private injector: Injector) {
setAppInjector(injector);
}
}
然后使所有需要的组件扩展AutoRefreshingComponent
。
在您的情况下:
@Component({
selector: 'app-user',
template: `
<input #box (keyup.enter)="onEnter(box.value)">
<div *ngIf="box.size > 0">
<app-order [value]="value"></app-order>
</div>`
})
export class UserComponent extends AutoRefreshingComponent {
value = '';
onEnter(value: string) {
this.value = value;
}
constructor() {
}
initialize() {
// Reset your box value
}
destroy() {
}
}
对于您想要实现的目标来说,这可能是多余的,但是每次您要在相同的URL导航上刷新组件时,它都会很有用。
让我知道这是否有帮助。