Angular 2-再次单击routerLink时重新加载组件

新手上路,请多包涵

我正在使用以下文件结构处理 Angular 2 项目。

  • HeaderComponent.ts
  • 应用组件.ts
  • Page1Component.ts
  • Page2Component.ts

我的 HeaderComponent.ts 中有以下模板

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a [routerLink]="['']">Home</a></li>
                <li><a [routerLink]="['/page1']" >Page1</a></li>
                <li><a [routerLink]="['/page2']">Page2</a></li>
            </ul>
        </div>
    </div>
</nav>

在我的 AppComponent 中使用以下路线

@Component({
    selector: 'my-app',
    template: `
            <my-header></my-header>
            <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
@Routes([
    {path: '/', component: HomeComponent},
    {path: '/page1', component: Page1Component}
    {path: '/page2', component: Page2Component}
])
export class AppComponent {
    ngAfterViewInit() {
        //To show the active tab in navbar
        $(".nav a").on("click", function () {
            $(".nav").find(".active").removeClass("active");
            $(this).parent().addClass("active");
        });
    }
}

我的 Page1Component 有以下示例表单

<section class="col-md-8 col-md-offset-2">
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="firstName">First Name</label>
            <input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control">
        </div>
        <div class="form-group">
            <label for="lastName">Last Name</label>
            <input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control">
        </div>
        <div class="form-group">
            <label for="email">Mail</label>
            <input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Sign Up</button>
    </form>
</section>

因此,当我单击标头 <li><a [routerLink]="['/page1']">Page1</a></li> 中的 Page1 routerLink 时,它会加载 <router-outlet></router-outlet> 中的 Page1Component。我在表单中填写了一些详细信息,当我在提交表单之前再次单击页眉中的 Page1 routerLink 时,我希望 Page1Component 重新加载,以便我的表单进入初始状态,但它在单击时不执行任何操作。我试图在 routerOnActivate()routerCanDeactivate() 中重置表单,但没有调用任何函数。所以基本上,我希望我的组件在我点击 [routerLink] 时再次加载

如果我能解释得更好,请告诉我。

原文由 Ankush 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 301
2 个回答

您可以使用虚拟路由来处理这种情况,

 <a (click)="changeRoute(url)">

向您的路由器添加一条虚拟路由:

 { path: 'dummy', component: dummyComponent }

虚拟组件.ts

 //Dummy component for route changes

@Component({
    selector: 'dummy',
    template: ''
})
export class dummyComponent{}

现在在你的组件中添加 changeRoute 函数:

 changeRoute(url) {
  this.router.navigateByUrl('/dummy', { skipLocationChange: true });
  setTimeout(() => this.router.navigate(url));
}
// 'skipLocationChange' will avoid /dummy to go into history API

这将重新渲染你的组件,其余的都将由 Angular 处理。

原文由 jigar gala 发布,翻译遵循 CC BY-SA 3.0 许可协议

您可以使用 (click) 事件在代码中导航到某个虚拟组件,然后再次返回到前一个组件。 router.navigate() 中有一个参数可以跳过历史更改,因此后退按钮可以继续使用此 hack。

原文由 Günter Zöchbauer 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏