如果用户输入了不存在的链接,我希望页面重定向到主页.
我该怎么做？谢谢
@RouteConfig([
{path: '/home', name: 'Home', component: HomeComponent},
{path: '/about', name: 'About', component: AboutComponent},
{path: '/???', name: 'not-found', redirectTo: ['Home']}
])
我正在尝试在学习Angular 2的同时设置一条简单的路线,每当我点击一个链接时,浏览器就会被路由到新的路线,但浏览器会重新请求所有资源(不像单页应用程序那样).
我的索引文件,
<!--... . . various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
应用来源,
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'
bootstrap(RoutingApp, [ROUTER_PROVIDERS]);
RoutingApp
import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector : 'app', …我正在关注Angular2文档中的简单快速启动应用程序,我正在使用spring后端来运行它.我的问题是,角度路由器从URL中删除了主题标签,所以现在应该example.com/#/dashboard是这样example.com/dashboard.
我正在使用LocationStrategyStackOverflow上的一堆帖子中指定的方法.以下是我的简单示例:
File: main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {TestComponent} from './simple/test.component'
bootstrap(
TestComponent,
[
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
File: test.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector: 'test1',
template: "<h1>This is test1 component</h1>"
})
export class Test1 { };
@Component({
selector: 'test2',
template: "<h1>This is test2 component</h1>"
})
export class Test2 { }; …在Angular 2中,我想定义两个使用相同Component的路由,但是一个路由是使用特殊预设参数的特殊情况.现在我想做的是他的:
@RouteConfig([
{ path: '/', name: 'Home', component: HomeComponent },
{ path: '/user/:id', name: 'User', component: UserComponent },
{ path: '/special-user', name: 'User', component: UserComponent, params:{'userId':'123'} },
])
我需要的是在"/ special-user"的最后一个路由定义中的"params".这有可能吗？
编辑:在路径/ user /:id中,id是url的一部分,但在特殊用户的情况下,我希望id不可见,不要成为url的一部分
我正在尝试使用angular2-seed项目作为基础并引用angular2-login-seed来实现登录功能.但是我收到以下错误.我查看了其他问题涉及相同的错误,但无法弄清楚我的代码有什么问题.请帮忙.
Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent'
我的应用组件代码:
@Component({
moduleId: module.id,
selector: 'sd-app',
viewProviders: [NameListService, HTTP_PROVIDERS],
templateUrl: 'app.component.html',
directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent]
})
export class AppComponent {
constructor() {
console.log('Environment config', Config);
}
}
app.component.html代码:
<sd-navbar><router-outlet></router-outlet></sd-navbar>
应用路由配置:
const routes: RouterConfig = [
{
path: 'login',
component: LoginComponent,
canActivate: [UnauthenticatedGuard]
},
...HomeRoutes,
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes),UnauthenticatedGuard, HomeComponentGuard
]; …我的路由器中有以下几行：
..
canActivate: [MyGuard],
path: "search",
component: SearchComponent,
data: {
accessRoles: [roleAdmin, roleUser]
}
..
我想通过MyGuard的canActivate限制对SearchComponent的访问。
是否可以从canActivate获取此数据数组？
先感谢您！
我有一个angular2应用程序,其后端是在java中.我有一份客户名单.当我单击以删除客户时,客户将被删除,但列表不会更新.如果我手动刷新页面,则列表会更新.我尝试在delete方法的订阅中路由到列表组件,但这不起作用.
列表customers.component.html
<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index">
<td>{{ serial+1 }}</td>
<td>{{ customer?.firstName+' '+customer?.lastName}}</td>
<td>{{ customer.email}}</td>
<td>{{ customer.mobileNumber}}</td>
<td>{{ customer.streetAddress}}</td>
<td>{{ customer.priceList?.name}}</td>
<td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td>
<td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td>
</tr>
列表customers.component.ts
ngOnInit()
{
this.refreshCustomersList();
}
delete(customer)
{
this.userService.delete(customer.id)
.subscribe(
success=>
{
var index = this.customers.indexOf(customer, 0);
if (index > -1)
{
this.customers.splice(index, 1);
}
}
)
}
refreshCustomersList()
{
this._authHttp.get(
this.appService.getApiUrl() + "api/customer/list"
)
.map(res=>res.json())
.subscribe( …当使用loadChildren()调用导入子路由时,我遇到了覆盖根路由的问题.
申请路线声明为:
const routes: Routes = [
{ path: '', redirectTo: 'own', pathMatch: 'full' },
{ path: 'own', component: OwnComponent },
{ path: 'nested', loadChildren: () => NestedModule},
];
export const routing = RouterModule.forRoot(routes);
嵌套子模块的路由:
const routes: Routes = [
{ path: 'page1', component: NestedPage1Component },
{ path: 'page2', component: NestedPage2Component },
{ path: '', redirectTo: 'page1', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Module1RoutingModule {}
我可以获得/拥有,/ nested/page1,/ nested/page2,但是当我尝试获取root /时,我正在重定向到/ page1.为什么会发生这种情况,因为它在带有RouterModule.forChild的子模块中声明,它如何重定向到/拥有？
我为repro创建了简单的插件 - https://plnkr.co/edit/8FE7C5JyiqjRZZvCCxXB?p=preview
有人经历过这种行为吗？
我正在尝试运行一个示例Web应用程序来了解Angular模块的延迟加载是如何工作的.我通过使用角度2.4.1的angular-cli 1.0.0-beta.24生成了应用程序.我生成了核心应用程序,然后是3个组件.然后我在应用程序级别添加了路由,并通过将组件导入app模块直接引用前两个组件.对于第三个组件,我只是使用Angular路由文档中指定的loadChildren方法添加路由.我对主应用程序的路由配置如下:
const appRoutes: Routes = [
{ path: 'comp1', component: Comp1Component},
{ path: 'comp2', component: Comp2Component},
{ path: 'comp3', loadChildren: 'app/comp3/comp3.module'}
];
export default RouterModule.forRoot(appRoutes);
我将第三个组件的代码转换为模块,并将所有从应用程序导入到第三个组件.该模块的路由配置如下:
const routes: Routes = [
{path: '', component:Comp3Component}
];
export default RouterModule.forChild(routes);
当我运行应用程序时,Comp1和Comp2的路由工作正常,当我单击Comp3的链接(模块路由)时,我得到以下错误记录到控制台:
EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'.
Error: Cannot find module './comp3/comp3.module'.
at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular]
似乎webpack没有处理延迟加载.我已尝试过"loadChildren"调用的各种路径变体,包括:
loadChildren: 'app/comp3/comp3.module#Comp3Module'
没有改变行为(仍然得到上面的错误).angular2的新功能可能是我的代码中的内容,但我看到其他人得到了相同的错误.我的google/stackoverflow foo并未引导我找到解决方案.我在这里将我的示例应用程序添加到了我的Github帐户.
我看到Angular团队的另一位开发人员记录了这个问题,但是他们把它作为支持问题踢给了StackOverflow,因为样本在plunkr上工作. 我确信在那里有一个线索,但我对webpack并不是很了解,以及它在找到应用程序的plunkr与ng服务运行中的差异时所做的工作.
添加其他信息.应用程序的html模板看起来像这样(也可以在github repo上获得):
<h1> …我的路线结构如下：
parent/:id
|
child
|
child
我可以通过以下方式从父组件获取参数：
ngOnInit() {
this.route.params.subscribe((params) => {
this.id = +params['id'];
});
}
然后<router-output>以某种方式将其作为输入？还是我必须像处理父母一样从每个孩子那里提取价值？
将参数从父组件传递到所有子组件的最佳方法是什么id？