我在Angular中遵循这个路由教程,它只是不起作用.当我使用'comp'选择器来放置它的HTML代码时,它可以正常工作,但是当我尝试使用路由器插座进行路由时,它只显示来自的标头index.html.
我有以下内容:
main.ts:
import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
selector: 'my-app'
})
@ng.View({
directives: [ng.formDirectives, ng.RouterOutlet],
template: `
<nav>
<ul>
<li>Start</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<router-outlet></router-outlet>
</main>
`
})
@ng.RouteConfig([{ path: '/', component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent, [ng.routerInjectables]); comp.ts:
import * as ng2 from 'angular2/angular2';
@ng2.Component({
selector: 'comp'
})
@ng2.View({
template: `
<h1>hi<h1>
`
})
export class Comp {
constructor() {
}
}index.html的:
<!DOCTYPE html>
<html> …我正在尝试在Angular2中实现文件资源管理器应用程序.
我的主页组件将包含文件夹和文件列表.如果我单击列表中的某些文件夹,然后使用单击文件夹的名称作为查询字符串,我应该导航到另一个组件,该组件再次具有其中的进一步文件夹和文件的列表,这可以继续一些更多的嵌套级别.我希望每个打开的文件夹的路径在url栏中可见(即./Folder1/Folder1.1/Folder1.1.2...so on.)
Folder1
Folder1.1
Folder1.1.1
Folder1.1.2
Folder1.2
Folder2
任何人都可以帮助我实现这一点,因为组件不能用作视图和路由器,我发现很难实现这一点,因为这种几乎无限的嵌套是不允许的.
我正在编写使用routeLink的最简单的组件:
@Component({
selector: 'memorySnippet',
templateUrl: '<div class="memory-snippet-wrapper" *ngIf="memory"
[routerLink]="['MainPanel', 'MemoryPanel', {'id' : this.memory.id}]">',
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class MemorySnippetComponent {
@Input() memory: Memory;
}
我尝试测试此组件时会出现此问题.我添加路由器链接Karma的那一刻抱怨缺少提供者:
添加所有提供商后,Karma要求我得到这个:
beforeEachProviders(() => [
MemorySnippetComponent,
MEMORY_SERVICE_PROVIDERS,
ROUTER_PROVIDERS,
ApplicationRef
]);
但是当我运行测试时,我得到了这个错误:
EXCEPTION:EXCEPTION:Token RouterPrimaryComponent实例化时出错!(RouterLink - > Router - > RouteRegistry - > Token RouterPrimaryComponent).
原始例外:未实现
ORIGINAL STACKTRACE:错误:未实现
我究竟做错了什么？？？Angular 2(2.0.0-beta.1)还没准备好用路由器指令测试组件吗？
我正在用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组件中启动一个计时器,它位于路由器插座内.
setInterval(() => {
...
}, 10000);
当我离开嵌入组件的路径时,计时器不会退出.我怎样才能做到这一点？
在我的服务中,我想描述在未经授权的情况下重定向用户时的行为.
export class MessagesService {
constructor (private http: Http) {}
private _usersUrl = '/users.json'; // URL to web api
getUsers() {
return this.http.get(this._usersUrl)
.map(res => <User[]> res.json().data)
.catch(this.handleError);
}
private handleError (error: Response) {
if (error.status == 401) {
// How do I tell Angular to navigate LoginComponent from here?
} else {
return Observable.throw(error.json().error || 'Server error');
}
}
}
我的问题是:
ApplicationComponent
import { Component } from '@angular/core';
import {Router, ROUTER_DIRECTIVES, Routes, ROUTER_PROVIDERS} from '@angular/router';
import {SchoolyearsComponent} from "./schoolyear/schoolyears.component";
@Component({
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
],
templateUrl: './app/application.component.html',
styleUrls: ['./app/application.component.css']
})
@Routes([
{
path: '/',
component: SchoolyearsComponent,
},
])
export class ApplicationComponent {}
SchoolyearsComponent
import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { SchoolyearsHomeComponent } from './schoolyears.home.component';
import { CreateSchoolyearComponent } from './create.schoolyear.component';
@Routes([
{
path: '',
component: SchoolyearsHomeComponent,
},
{
path: '/create',
component: CreateSchoolyearComponent …我正在构建一个应用程序,其中第一个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也是空的.
我究竟做错了什么？也许更重要的是,我显然缺少对路由器的一些概念性理解,但我在文档或其他地方找不到任何有用的信息.
谢谢你的帮助!
我遇到了一个问题,看起来我无法导航到新路线,同时清除插座/辅助路线.
分别调用这两个动作是有效的 - 但感觉就像一个解决方法.是否有充分理由将它们作为两个电话完成？或者我的实施中是否有错误？或者我应该将其作为GitHub问题提交？
这些独立工作:
// Navigate to `/second`
this._router.navigate(['/second']);
// Clears the `popup` outlet
this._router.navigate(['', {outlets: { popup: null }}]);
我认为这应该有效,但它不清楚出口:
this._router.navigate(['/second', {outlets: { popup: null }}]);
我目前的解决方法是:
this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );
我创建了一个plnkr概念证明 - 导航代码在global-popup.component.ts
我有一个类Hero需要扩展GoogleCharts类.我还需要实现OnInit来从params获取一些数据.
我怎样才能做到这一点？