我正在尝试使用Angular 2路由器记录当前路由,使用官方文档中的示例代码:https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html
import {Component} from 'angular2/core';
import {
OnActivate,
ComponentInstruction
} from 'angular2/router';
@Component({selector: 'header-title', template: `<div>routerOnActivate: {{log}}</div>`})
export class HeaderTitle implements OnActivate {
log: string = '';
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log('hello on activate');
this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`;
}
}
routerOnActivate永远不会调用该方法.
我使用RouteConfig注释配置了路由:
@RouteConfig([
{path: '/', component: Home, name: 'Index', data: {title: 'Index page'}},
{path: '/home', component: Home, name: 'Home', data: {title: 'Welcome Home'}},
{path: …我正在用angular2和MVC5编写单页应用程序.不过,我对两者都很陌生,而且我在路由方面遇到了麻烦.
我想将网址匹配为:
/ - >转到我的索引页面,其中bootstraps angular/api/{controller}/{id?} - > REST API/{*anythingelse} - >如果存在文件,则将其作为静态内容返回; 否则,如果角度可以路由它,有角度路线; 否则返回404.第二点很容易,如果我愿意放弃404返回,我可以让客户端路由工作,但我似乎无法调和它.
看起来应该这样:
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "api",
template: "api/{controller}/{id?}");
routes.MapRoute(
name: "spa",
template: "{*anythingelse}",
defaults: new { controller = "Home", action = "Index" });
});
和:
@RouteConfig([
{ path: "/", name: 'Splash', component: SplashView },
{ path: '/accounts/login', name: 'Login', component: LoginView },
{ path: '/accounts/register', name: 'Registration', component: RegistrationView },
{ path: '/home/...', name: 'Home', component: HomeView },
])
但是,这只是为每个不是静态文件的请求提供Index.cshtml.
我觉得这已经是一个已经解决的问题,但我无法在网上找到任何关于它的信息.如何正确地做到这一点？ …
目前我正在使用Angular 2 Beta 8开发一个Web应用程序.现在,当使用routerLink指令时,我遇到了嵌套路由的问题.
路由器层次结构是:
AppCmp
|-> NewItemFormCmp
|-> UserDashboardCmp
|-> MyItemsCmp
涉及的组件是:
@Component({
...
})
@RouteConfig([
{component: NewItemFormCmp, name: 'NewItemForm', path: '/item/new'},
{component: UserDashboardCmp, name: 'UserDashboardCmp', path: '/me/...', useAsDefault: true}
])
export class AppCmp {
}
@Component({
...
})
@RouteConfig([
{component: MyItemsCmp, name: 'MyItemsCmp', path: '/items', useAsDefault: true}
])
export class UserDashboardCmp {
}
@Component({
template: `
...
a([routerLink]='["NewItemForm"]'
...
`
})
export class MyItemsCmp {
}
嵌套到MyItemsCmp的路由完全正常.现在我想在MyItemsCmp中实现一个按钮,使用如组件模板中所示的routerLink指令导航到NewItemFormCmp.
加载Component'MyItemsCmp'时,模板的所有元素都将在浏览器中呈现.但是NewItemFormCmp的链接不起作用,控制台中有一个例外.
Uncaught EXCEPTION: Component "MyItemsCmp" has no route config. in [["NewItemForm"] …我有三个很基本的组成部分:AppComponent,AdminComponent和LoginComponent.双方AppComponent并LoginComponent显示一个链接AdminComponent.AppComponent包含router-outlet和所有路由配置.
现在,出于某种原因角呈现<a [routerLink]="['Admin']">Admin</a>给<a href="/admin">Admin</a>在AppComponent同样的预期.但是,LoginComponent呈现的完全相同的链接<a>Admin</a>.我究竟做错了什么？
尝试了Angular版本:2.0.0-beta.8和2.0.0-beta.9.
app.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AdminComponent} from './admin.component';
import {LoginComponent} from './login.component';
@Component({
selector: 'ww-app',
template: `
<a [routerLink]="['Admin']">Admin</a> // This link works as expected
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/login', component: LoginComponent, name: 'Login', useAsDefault: true },
{ path: …请告诉我我的错误在哪里,我的应用程序运行AppComponent代码两次.我有5个文件:
main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { APP_ROUTER_PROVIDERS } from './app/routes';
import {HTTP_PROVIDERS} from '@angular/http';
import {ServiceProvider} from "./app/providers/app.service.provider"
if (environment.production) {
enableProdMode();
}
bootstrap(AppComponent, [ServiceProvider, APP_ROUTER_PROVIDERS, HTTP_PROVIDERS]);
routes.ts:
import {provideRouter, RouterConfig} from '@angular/router';
import {AppComponent} from "./app.component";
import {ReportDetailComponent} from "./component/AppReportDetailComponent";
import {ReportsListComponent} from "./component/AppReportListComponent";
import {ReportCreateComponent} from "./component/AppReportCreateComponent";
export const routes:RouterConfig = [
{
path: 'reports',
children: [
{path: ':id', component: …我正在使用带有cordova的Angular 2开发一个应用程序.我使用了角度cli来构建应用程序.在IOS应用程序中,我现在遇到了一些启动路由问题.基础href似乎设置错误.如果我使用以下方法设置基本href:<base href="/" target="_blank">应用程序不会加载.如果在我使用以下引导应用程序时设置了基本href:...,provide(APP_BASE_HREF, {useValue:'/'}), ...应用程序将加载但我得到以下异常:
例外:错误:未捕获(承诺):错误:无法匹配任何路线:'var/containers/Bundle/Application/3C8966ED-7DDD-4309-8C18-10B778C5AE15/test.app/www'
因此,应用程序无法正常运行,因为在应用程序启动时不会加载关键文件.对于android我遇到了同样的问题,但我找到了解决方案,在以下问题android解决方案中设置基本href .有没有人遇到过这个问题并有解决方案？
编辑:我通过使用这个来解决问题:<base href="./" target="_blank">在索引html中删除provide(APP_BASE_HREF, {useValue:'/'}).这样我就必须根据我将应用程序部署到android或ios来设置更改基本href.
如果我使用延迟加载并为"CanLoad"定义了一个保护.是否需要"CanActivate"？因为可以有效地加载模块但是然后用户做了使"CanLoad"无效的事情,但是因为它被加载,所以用户可以通过CanLoad.
我一直懒得在路线上加载模块,例如
export const HomeRoute: Route = {
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{path: 'dashboard', loadChildren: 'app/+dashboard/db.module#DashboardModule'}
]
};
我想将我的"页面"放入NPM模块中.我应该在loadChildren属性中使用node_module的路由是什么？我使用的是angular-cli 1.0.0-beta.16
我试过了
{path: 'lazy', loadChildren: '../node_modules/hello-world/components#HelloWorld' }
也
{path: 'lazy', loadChildren: 'hello-world/components#HelloWorld' }
导出的类是: -
import {Component} from '@angular/core';
@Component({
selector: 'hello-world',
styles: [`
h1 {
color: blue;
}
`],
template: `<div>
<h1 (click)="onClick()">{{message}}</h1>
</div>`
})
export class HelloWorld {
message = "Click Me ...";
onClick() {
this.message = "Hello World!";
console.log(this.message);
}
}
还有什么我应该尝试的吗？
我有一个角度2.0.1(最终)应用程序,它使用HashLocationStrategy作为路径导航策略.
我定义了一条路线,如下所示:
{
path: 'shiftmanage', component: ShiftManageComponent,
canLoad: [AuthGuard],
canActivate: [AuthGuard]
},
这是AuthGuard类:
import { Injectable } from '@angular/core';
import {
Route,
Router,
CanLoad,
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanLoad, CanActivate {
constructor(private router: Router) {
console.log("AuthGuard constructor")
}
canLoad(route: Route): boolean {
if (route.path === "shifts") {
return true;
} else {
return false;
}
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (route.routeConfig.path === "shiftmanage") {
return true;
} else …我正在构建一个应用程序,其中第一个url段代表界面的语言,如:
/en/customer/3
/en/shop
我的路由器设置如下:
{ path: ':lang/customers/:id', component: CustomerComponent },
{ path: ':lang/shop', component: ShopComponent },
我想在引导的AppComponent或翻译服务中使用url(本例中为lang ='en')中的语言参数.我可以在ShopComponent和CustomerComponent中访问此参数,但代码中没有其他地方.当我在AppComponent中输入时:
constructor(private activatedRoute: ActivatedRoute, private router : Router) {
}
ngOnInit() {
this.router.routerState.root.params.subscribe((params: Params) => {
console.log('params: ',params);
}
this.activatedRoute.params.subscribe((params: Params) => {
console.log('params: ',params);
}
}
我得到两个空物.url param也是空的.
我究竟做错了什么？也许更重要的是,我显然缺少对路由器的一些概念性理解,但我在文档或其他地方找不到任何有用的信息.
谢谢你的帮助!
angular2-routing ×10
angular ×8
typescript ×2
angular-cli ×1
cordova ×1
ios ×1
javascript ×1
router ×1
routing ×1
url-routing ×1