我正在尝试使用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: …我有三个很基本的组成部分: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: …使用Angular 2路由器,我想在请求激活路由时捕获事件.在Angular 1.x中,我使用$ locationChangeSuccess,然后检查用户是否已登录.
我需要使用Angular 2做类似的事情,因此如果用户尚未通过身份验证,我可以将用户重定向到登录屏幕.
请告诉我我的错误在哪里,我的应用程序运行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.
我一直懒得在路线上加载模块,例如
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 …我试图与嵌套的路由器插座进行延迟加载工作,但没有运气.
Angular 4中是否支持此功能？
这是我的用例:
使用延迟加载模块的路由器导航时似乎存在问题.如果我删除延迟加载,这工作正常.但根据延迟加载模块,这是我的设置:
在我的app.template中,我定义了主路由器插座.
我有以下根应用程序路由器
export const ROUTES: Routes = [
{
path: 'user/:id', loadChildren: './user/profile/profile.module#ProfileModule'
}
]
当配置文件模块加载到主路由器插座时,它将显示一个带有两个路由选项卡和内部配置文件的页面.模块我定义了以下子路由
const ROUTES: Routes = [
{
path: '', component: ProfileComponent,
children: [
{ path: 'subPath1', loadChildren: '../subModule1/subModule1.module#SubModule1Module' },
{ path: 'subPath2', loadChildren: '../subModule2/subModule2.module#SubModule2Module' },
]
}
];
@NgModule({
imports: [
RouterModule.forChild(ROUTES),
....
]
}
在profile.template里面我有像这样定义的路由选项卡
<nav md-tab-nav-bar>
<a class="tab-label" md-tab-link [routerLink]="'subPath1'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
Sub path 1
</a>
<a class="tab-label" md-tab-link [routerLink]="'subPath2'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
Sub path 2
</a> …我刚刚开始潜入Angular 1.5来自Angular 1.5.我正在处理用户路由并将API数据从服务中提取到用户组件中.
与1.*中的控制器不同,组件似乎保持静态,在每个请求中刷新它们.
无论如何要在每个新路由请求上调用ngOnInit函数吗？
我的用户组件类:
// url structure: /user/:id
export class UserComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// doesn't log new id on route change
let id = this.route.snapshot.params['id'];
console.log(id);
this.route.params
.switchMap(params => this.userService.getUser(params['id']))
.subscribe(user => {
// logs new id on route change
let id = this.route.snapshot.params['id'];
console.log(id);
this.user = user
});
}
}
更新:
找到了一个我觉得最适合我的方案的解决方案.根据我的问题和进一步调查的几个答案和评论,订阅路线似乎是要走的路.这是我更新的组件:
export class UserComponent {
user;
id;
constructor(
private userService: UserService,
private route: ActivatedRoute
) {}
ngOnInit() { …我订阅了路由器事件angular2,当我控制事件时,我发现了一个NavigationCancel事件reason: "".很想知道NavigationCancel触发的原因是什么.不仅empty有理由,而且一般.