该角2 ES5小抄说,要做到这一点:
var MyComponent = ng.router.RouteConfig([
{ path: '/:myParam', component: MyComponent, as: 'MyCmp' },
{ path: '/staticPath', component: ..., as: ...},
{ path: '/*wildCardParam', component: ..., as: ...}
]).Class({
constructor: function() {}
});
但是,我无法弄清楚如何指定@Component该类的东西,以便我可以实际实例化它.例如,
ng.router.RouteConfig([...]).Component({})
抛出异常,因为结果.RouteConfig没有.Component方法.同样,结果.Component没有.RouteConfig方法.你如何设置这个？
我想知道是否有办法将路径内的事件传播到外面<router-outlet></router-outlet>.
场景就像我们有一条路线说Home,&HomeComponent应该通知根组件.如果它是app.component的直接子代,我们可以在HomeComponent中使用EventEmitter类型输出属性并在<home (eventName)="actionName()"></home>指令上使用事件绑定.但事实并非如此,因为HomeComponent是在路线内使用的.
请通过建议从路由到根组件的事件传播的正确方法来帮助我.
我正在创建一个Angular 2 RC5应用程序,并且每个模块都是延迟加载的.当应用程序启动时,它会LocalizationListComponent按预期显示列表,但控制台中会显示一条消息Cannot find primary outlet to load 'LocalizationListComponent'.考虑到显示列表并且错误抱怨该组件是非常奇怪和不寻常的.
为了解决这个问题,我需要<router-outlet>与ROUTER_DIRECTIVES受此错误影响的每个组件和视图一起添加.这样做的问题是列表将显示两次,详细信息屏幕将加载到此列表下.这不是我想要的行为.
在此之后,我通过angular.io上的Angular 2 Routing教程,检查了他们的plunker代码.一切似乎都是相同的,但错误仍然存在.
我已将应用程序上传到dropbox(inactive link)
这是模块,路线和组件(我为长列表道歉):
app.routes.ts
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
{
path: "",
redirectTo: "/localizations",
pathMatch: "full"
},
{
path: "localizations",
loadChildren: "./app/modules/localization/localization.module",
}
];
export const appRoutes = RouterModule.forRoot(routes);
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { appRoutes } from "../routes/app.routes"
import { …我正在尝试测试路由器插座.
我最初有:
expect(landingPageLink).toBe('/', '1st link should go to landing page');
我收到了这个错误:
错误:预期['/']为'/','第一个链接应该登陆'.
所以改成了这个:
expect(landingPageLink).toBe(['/'], '1st link should go to landing page');
现在我收到这个错误:
错误:预期['/']为['/'],'第一个链接应该转到目标网页'.
在底部错误中它们看起来相同.怎么会不一样？
全面测试:
import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';
import {
ComponentFixture,
TestBed,
async,
fakeAsync
} from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import {
DebugElement,
Component,
ViewChild,
Pipe,
PipeTransform,
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Router, …它是否有助于减少加载时间？(例如只将当前模块加载到客户端的设备？)
我的理解是......
typescript angular-module angular2-routing angular2-modules angular
在Angular2中，是否可以具有可以应用于多个组件的相同防护（例如CanActivate或CanDeactivate）？
这是一个警卫MyComponent1：
@Injectable()
export class MyGuard implements CanDeactivate<MyComponent1> {
canDeactivate(component: MyComponent1): Promise<boolean> {
// my code here
}
}
我想要完全相同的后卫MyComponent2，MyComponent3等等。
我该如何实施呢？我需要按组件声明新的防护类，还是可以重用我的类MyGuard？
我将使用angular 2构建一个完整的项目,该项目包含管理面板和用户的前端Web.
我不知道如何将管理员与网络分开,我应该使用路由吗？但这需要我导入内部的所有组件,app.module.ts还是有另一种方法可以使用两个app.module.ts用于Web,一个用于管理员？
或者我该怎么办？
我想在Angular项目的typescript类中引用关键字"this".但它无法使用.我总是得到我想要改变的变量没有定义的错误.这是我的实现:
export class ContactComponent implements OnInit {
contactForm: FormGroup;
errorMsg:string = '';
redirect = "";
loggedIn(): void {
this.redirect = "dashboard";
console.log("success");
在我的HTML中,重定向变量连接到routerLink,如下所示:
<a [routerLink]="redirect"></a>
我已尝试使用其他函数中的其他变量,但始终存在相同的错误.
编辑:
loggedIn函数在另一个函数中作为"success"参数调用,如下所示:
submitForm(): void {
DBEventProxy.instance().dbevent.login(this.contactForm['username'],
this.contactForm['password'], this.loggedIn, this.failed);
}
登录功能需要参数用户名,密码,成功功能,失败功能.
我有一个特殊情况,我需要重定向到一个网址并重新加载.
我从路由器使用此方法:
this.router.navigateByUrl('login');
this.reload();
在this.reload()角度区域外工作的函数在哪里强制重新加载页面.我需要强制重新加载,因为我无法控制来自服务器的一些资产.
重新加载的代码是:
public reload(): any {
return this.zone.runOutsideAngular(() => {
location.reload()
});
}
问题是:
我在开头导航到登录,然后重新加载页面,这是默认行为.
所需输出:
只需导航而不渲染组件并重新加载,就像我们点击一些未经授权的URL时,我们会被重定向到大多数站点的登录页面.
我的文件夹结构是：
+-- app.module.ts
+-- app.routing.ts
+-- app.component.ts
+-- account/
| +-- account.module.ts
| +-- account.routing.ts
| +-- account.component.ts
在我的app.routing.ts中，
{ path: 'account', loadChildren: './account/account.module#AccountModule' },
而且，在account.routing.ts中，
{ path: 'login', component: LoginFormComponent}
但是当我输入页面/帐户/登录时，出现以下错误：
NodeInvocationException：未捕获（承诺）：错误：找不到模块“ ./account/account.module”。错误：找不到模块“ ./account/account.module”。
我尝试将./account/account.module#AccountModule更改为app / account / account.module＃AccountModule，同样的错误。
有什么想法吗？提前致谢。