- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在处理具有以下文件结构的 Angular 2 项目。
我的 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] 时再次加载
如果我能解释得更好,请告诉我。
最佳答案
您可以使用虚拟路由来处理这种情况,
<a (click)="changeRoute(url)">
向您的路由器添加一条虚拟路由:
{ path: 'dummy', component: dummyComponent }
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 处理。
关于javascript - Angular 2-再次单击routerLink时重新加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37645368/
In the Angular documentation , routerLink指令选择器定义为: :not(a)[routerLink] 据我所知,这意味着“所有具有routerLink属性的非标
[routerLink] 和 routerLink 有什么区别?你应该如何使用它们? 最佳答案 您会在所有指令中看到这一点: 当您使用括号时,这意味着您正在传递一个可绑定(bind)属性(一个变量)。
我真的很困惑我是否应该使用 About 或 About 最佳答案 两者都是正确的。 About 和 About 将路径作为字符串传递 同时 About 传递一组路由器命令。 两者都受支持。 https
我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标签没有问题,在登录页面中的 ngOnInit 期间,我可以按预期检索状态。使用标签主页也是导航,但状态结果
我试图在我的 routerLink 中传递一个 id,我怎么能连接它? doesnt work. 你有解决方案吗? 提前致谢 最佳答案 你去吧。 Link 关于 Angular 变量到 rou
所以我有一个包含 2 个独立部分的应用程序,需要单独导航,我认为 Aux Routing 是可行的方法。 这是我的路线: export const ROUTES: Routes = [ { pat
我有一个routerLink在我的页面上,转到某个路线,但我收到此错误 基本上,我有一个具有唯一 id 的 Assets 页面,然后当您单击按钮时,id 会发生变化,并且路线应该更新,因此 asset
我对此组件的 html 调用 这是一个动态组件,然后在 onBtnActionClicked($event) 中需要像这样重定向 {{detail.detailId}} 但是正如你所
我的主 app.html 文件中有一个简单的应用程序,其结构如下。 在我的导航列表组件中,我可以轻松创建 routerLinks,如下所示: link 但是,当我进入路由器导出内呈
我正在尝试将 routerLink 与以下函数一起使用: Home callHome(data){ //perform some operations this.router.navig
我在教程中看到他们对 routerLink 属性使用了两种类型的语法。 我找不到任何说明它们之间差异的文档。 最佳答案 这是关于 Angular 非常重要的了解!当您在属性周围使用 [] 时,这意
... path: ':category/:page', ... {{category.attributes.name}} 浏览器中routerLink的第一个参数是NaN。我该如何修复它?
我正在尝试创建一个具有登录功能的 Angular 应用程序。 我用过ng cli生成空白应用程序。它带有 AppComponent 。 然后我创建了一个 LoginComponent和一个 HomeC
我有 2 一切都很好,这是我的RouteConfig在配置文件组件内: @Component({ selector : "profile", templateUrl: '/client
在这个演示应用程序中,我在延迟加载的书籍模块中有以下路由: { path: 'collection', component: CollectionPageComponent }, 并在搜索组件中使用以
我已经使用路由器链接在我的网络应用程序中添加了页面导航,出于某种原因,该页面大部分时间只是重新加载,而在其他时候它工作正常,非常随机。 我很困惑,尤其是为什么它会随机工作。任何见解都会有所帮助。 相关
我从 Vue.js 中的 VueRouter 开始,我遇到了这个错误: [Vue warn]: $attrs is readonly. found in ---> at resources\
我只想在一条路线上删除一个类(class),(或者在所有但只有一条路线上添加一个类(class)。)这怎么可能?我已经尝试使用多个参数的 [routerLink] 无济于事:
我正在制作一个电子商务网站,我的目标是每个对象有多个输入点,例如,他们单击/点击卡片上除按钮以外的任何地方,它将在单击/时转到产品详细信息/点击按钮会将该项目添加到购物车。 目前我转发到详情没有问题,
我想要一种更好的方式来编写这些代码行。 1" class="page-item"> First 1)" class="page-item disabled"> First
我是一名优秀的程序员,十分优秀!