我试图通过角度为2的路由器链接发送一个对象.我为我的人阵列中的每个人对象创建一个人物 - 个人资料组件,并将其显示在我的屏幕上.
<div *ngFor="#person of people; #i = index">
<person-profile [person]="person"></person-profile>
</div>
person-profile组件显示person对象中包含的几条信息.我试图使用路由器链接将人物对象组件中的整个人物对象发送到名为"map"的组件,并将人物对象作为参数传递.
<person-profile>
..code..
<tr>
<td class="category">Address</td>
<td>{{ person.visiting_address }}</td>
<td *ngIf="person.visiting_address"><a [routerLink]="['Map',{person:person}]">View on map</a></td>
</tr>
..code..
<person-profile>
在我的地图组件中,我检索对象:
var person = <any> routeParams.get('person');
问题是我每次都在地图组件中得到同一个人,无论<person-profile>我从哪个执行路由器链接.它始终是人民名单中的第一人.奇怪的是,如果我传递来自person对象的特定参数,它就可以工作.例如,如果我传递person.family_name而不是整个person对象,一切正常,但我想发送整个对象.有什么建议？
谢谢!
我正在尝试使用新路由器为我的Angular 2应用程序设置身份验证.有人建议尝试以下方法:
constructor (private _router: Router) {}
ngOnInit(){
this._router.subscribe(
next => {
if (!userIsLoggedInOrWhatever) {
this._router.navigate(['Login']);
}
}
)
}
然而,这个问题是这会导致打字稿错误
(app.component.ts(47,22):错误TS2339:"路由器"类型上不存在属性"subscribe".
这很奇怪,因为文档清楚地表明Router对象确实具有此功能.我可以调用其他函数,如router.navigate(['/ url']).你们知道这可能是什么问题吗？
我在用RC3.我正在实现Angular2这里记录的新路由器:https://angular.io/docs/ts/latest/guide/router.html
一切正常但我在单元测试中遇到问题.具体来说,我不能将Angular2服务注入我的单元测试中.
我的相关组件代码是:
import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
templateUrl: ...
styleUrls: ...
})
export class Route1DetailComponent {
constructor(private route:ActivatedRoute) {
console.log(route);
}
}
我的单元测试看起来像:
import {
expect, it, iit, xit,
describe, ddescribe, xdescribe,
beforeEach, beforeEachProviders, withProviders,
async, inject
} from '@angular/core/testing';
import {ActivatedRoute} from '@angular/router';
import {Route1DetailComponent} from './route1-detail.component';
import {TestComponentBuilder} from '@angular/compiler/testing';
describe('route1-detail.component.ts', () => {
beforeEachProviders(() => [
{provide: ActivatedRoute, useClass: ActivatedRoute}
]);
it('should instantiate …我的Angular 2应用程序使用默认的HTML 5 history.pushState 位置策略.如何使用history.pushState浏览器刷新配置服务器并且浏览器URL不生成404s？
例如,Tour of Heroes应用程序有一些不同的应用程序路径,例如:
http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13
如果你打刷新在这些航线上的一个,或键入一个URL,你会得到404,因为/detail/13是一个应用程序的路线,而不是服务器资源.我已将位置策略配置head在我的顶部index.html:
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Tour of Heroes</title>
但是如何配置服务器以便将所有URL发送到我的应用程序而不是生成404？
注意:这个问题是问题的补充当我通过浏览器刷新Angular 2:404错误时,Angular 2.0路由器无法重新加载浏览器,询问如何解决此问题.对于Firebase,有这样的:当我刷新我的网站时,我得到一个404.这是使用Angular2和firebase,对于Apache,这就是:Angular路由的htaccess重定向.
如果我输入的结构类似localhost:3000 /某些东西,应用程序被正确地重定向到localhost:3000/login,但如果我以localhost:3000/something/something的形式输入URL,则应用程序崩溃,因为路由器没有正确重定向.
我像这样设置路由器文件:
@NgModule({
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: '**', component: PageNotFoundComponent },
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
我在我的Angular 2应用程序中使用HTML5 URL样式.
当他输入像localhost:3000/something/something这样的URL时,如何设置用于显示用户404页面的通配符？
我一直在尝试Angular 2.1和模块延迟加载和预加载。到目前为止，我已经能够做一些普通的事情并使用不同的策略，或者定义了一种基本的自定义方法，如文档和Victor Savkin的这篇文章中所述。
但是，是否有任何预加载模块的方式，可以在特定事件或组件上的交互（例如单击或类似的想法，然后导航到它）之后触发此加载？
是否有可能注入的东西比一个布尔/数字/字符串值到的数据参数更有趣的路线（即会被添加到RouterModule.forRoot为例）和消费它，当你定义自己的PreloadingStrategy？
app.routes.ts
[
{
path: 'moduleA',
loadChildren: './moduleA.module',
data: {preload: true}
},
{
path: 'moduleB',
loadChildren: './moduleB.module'
}
]
...
export class PreloadSelectedModulesList implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any> {
return route.data && route.data.preload ? load() : of(null);
}
}
我使用angular2 cli。
测试导航相对遇到的问题：
路由配置：
{
path: '',
component: CheckCompanyComponent,
children:[
{
path:'',
loadChildren: 'app/components/company/check-company-home/check-company-home.module#CheckCompanyHomeModule'
},
{
path:':id',
loadChildren: 'app/components/company/check-company-detail/check-company-detail.module#CheckCompanyDetailModule'
}
]
}
在check-company-home组件中
goIdPage(){
this.router.navigate(['22'], { relativeTo: this.route });
}
可以从“ / company”导航到“ / company / 22”
在check-company-detail组件中：
goBack(){
this.router.navigate(['../'], { relativeTo: this.route });
}
但是无法将表格“ / company / 22”导航到“ / company”，
为什么？
在将我的代码从RC4移动到2.1.2期间,我遇到了一个奇怪的问题:我的所有构造函数参数都未定义其值.
我试图将提供商从组件移动到app.module.ts到app.component.ts.它们都不起作用.
2.1.2中有哪些新功能可以使依赖注入器注入"未定义"而不是创建/提供服务实例？
笔记
Can't resovle all parameters for AppComponent (?,?,?)还有什么输入？
app.component.ts
import { Component,Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../login/auth.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">Angular Router</h1>
<nav>
</nav>
<router-outlet></router-outlet>
`
})
@Injectable()
export class AppComponent {
constructor( // debug here
private auth: AuthService, // auth = undefined
private router: Router, // router = undefined
) {
console.log("AppComponent constructor");
}
} …我是Angular2的新手,正在边做边学.现在,我已成功构建了一个包含父组件,多个子组件和数据库服务的多视图.现在我将要使用各自的父子组件来实现其他视图.
应用程序应该使用可以在其他组件中添加/更新/删除的相同数据集,因此我正在寻找一个单独的数据层,可以由应用程序的所有组件直接查询.更多 - 我需要相同的服务实例,以便中间数据随处可用,以及避免不必要的数据库访问.在Angular2中定义和使用这样一个类的最佳方法是什么？
更新问: 现在,当我可以直接访问整个应用程序中数据层的同一实例的变量时,处理组件中变量的最佳方法是什么？
a)我应该使用本地组件变量,它们是相同数据层变量的副本(因此显式加载,获取和设置它们),如
this.locations = this.datalayer.locations;
this.selectedLocation;
updateLocation(id) {
this.selectedLocation = id;
this.datalayer.setSelectedLocation(id);
}
getSelectedLocation() {
return this.selectedLocation;
}
或者b)我应该专门处理数据层变量,迭代它们,从组件中获取和设置它们吗？
updateLocation(id) {
this.datalayer.selectedLocation = id;
}
getSelectedLocation() {
return this.datalayer.selectedLocation;
}
或者可能有一个选项c？
data-layers typescript angular2-routing angular2-services angular
我有一个与路由器的Angular 2应用程序.假设用户在应用程序的页面A上,然后导航到页面B然后导航到页面C.此时,当他单击浏览器上的"返回"按钮时,我希望他返回页面A(通过跳过B).我怎样才能实现它？
angular ×10
angular2-routing ×10
typescript ×2
angular-cli ×1
angular2-cli ×1
angular2-di ×1
data-layers ×1
javascript ×1