假设我有两个Angular 2组件：ComponentA和ComponentB。我希望能够从ComponentA导航到ComponentB，然后最终回到ComponentA，而不必重新初始化ComponentA。
在当前的Angular 2 Router实现中，每次我离开某个组件时，该组件都会被破坏，并且下次我导航至该组件时必须重新创建该组件。
我知道我可以通过使用Service来保留组件的状态，但这似乎比实际解决方案更像是一种解决方法。有没有办法解决？
我正在使用Angular 4，这是我需要捕获该路由已更改并重新加载页面的组件之一中的代码。
ngOnInit() {
this.router.events.subscribe((value) => {
if (value instanceof NavigationEnd) {
console.log(value);
}
});
}
我的问题是我在一条路线上遇到多个“ NavigationEnd”事件。对于某些路由console.log，甚至可以写6,7个值。
那怎么可能发生？
我的情况:
我有一个组件显示tile,每个tile表示一个数组中的对象,该数组通过ngfor循环.单击一个图块时,我想将该对象传递给另一个组件,该组件负责在可以修改的字段中显示该对象的所有属性.
我尝试过的:
在做了一些研究并发现多个帖子向我展示了如何为父子层次结构实现这一点以及一些帖子解释为了实现想要的功能需要使用共享服务,我决定尝试设置这样的服务.
然而,我似乎没有得到的是当我应该导航到不同的路线.似乎导航在早期找到了位置,因为在详细信息组件中检索它时,传递给服务的对象是未定义的.
我的代码:
显示切片的组件具有以下功能,可将单击的对象传递给共享服务:
editPropertyDetails(property: Property) {
console.log('Edit property called');
return new Promise(resolve => {
this.sharedPropertyService.setPropertyToDisplay(property);
resolve();
}).then(
() => this.router.navigate(['/properties/detail'])
)
}
共享服务具有设置属性对象的功能和检索它的功能,如下所示:
@Injectable()
export class SharedPropertyService {
// Observable
public propertyToDisplay = new Subject<Property>();
constructor( private router: Router) {}
setPropertyToDisplay(property: Property) {
console.log('setPropertyToDisplay called');
this.propertyToDisplay.next(property);
}
getPropertyToDisplay(): Observable<Property> {
console.log('getPropertyToDisplay called');
return this.propertyToDisplay.asObservable();
}
}
最后是必须接收被单击的对象但获取未定义对象的detail组件:
export class PropertyDetailComponent implements OnDestroy {
property: Property;
subscription: Subscription;
constructor(private sharedPropertyService: SharedPropertyService) {
this.subscription = this.sharedPropertyService.getPropertyToDisplay()
.subscribe(
property …我知道这是一个常见的问题,但实际上我没有找到满足我需求的任何答案......
我有一个angular5像这样的路由配置的应用程序:
const routes: Routes = [
{ path: 'businessaccountmanagement', component:BusinessAccountManagementComponent },
...
];
根据UrlSerializer文件我已经DefaultUrlSerializer像这样扩展:
import { DefaultUrlSerializer, UrlTree, UrlSerializer } from '@angular/router';
export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
parse(url: string): UrlTree {
return super.parse(url.toLowerCase());
}
}
export const LowerCaseUrlSerializerProvider = {
provide: UrlSerializer,
useClass: LowerCaseUrlSerializer
};
所以在这个实现中一切都工作得很好因为所有url案例将转换为小写并匹配 path: 'businessaccountmanagement'
但是,我需要的是宣布我的路线是upper camel case这样的:
const routes: Routes = [
{ path: 'BusinessAccountManagement', component:BusinessAccountManagementComponent },
...
];
并接受所有匹配字符串的路由,无论字母大小写
接受的路线示例:
我们在Kubernetes集群上托管了基于Angular的Web应用程序.此应用程序的Ingress配置为添加基本URL:
{
"kind": "Ingress",
"apiVersion": "extensions/v1beta1",
"metadata": {
"name": "test-app",
"namespace": "acceptance-testing",
...
"annotations": {
"kubernetes.io/ingress.class": "nginx",
"nginx.ingress.kubernetes.io/add-base-url": "true",
"nginx.ingress.kubernetes.io/rewrite-target": "/",
"nginx.ingress.kubernetes.io/ssl-redirect": "true"
}
},
"spec": {
"rules": [
{
"http": {
"paths": [
{
"path": "/at/test-app",
"backend": {
"serviceName": "test-app",
"servicePort": 80
}
}
]
}
}
]
},
...
}
当我们在浏览器中输入包含客户端路由部分的URL时,ingress会将整个URL添加为在我们的场景中不正确的基础.
例如,对于https:// server/at/test-app/some-page请求基本URL应为https:// server/at/test-app /但我们接收https:// server/at/test-app /一些页/
我们已经切换到Angular哈希路由位置策略,现在它正常工作但我们想知道是否有某种方法使位置路由策略与nginx入口一起工作？
预先感谢您的帮助.
最好的祝福
Angular路由器在NgRx效果中是否有任何限制？
我刚开始学习NgRx,我有以下代码:
@Effect() public authenticate$ = this.actions$
.ofType(authenticationActions.AUTHENTICATE)
.switchMap((action: AuthenticateAction) => this.authenticationService.authenticate(action.payload)
.map((data: TokenData) => {
const user: User = {
token: data.token,
username: 'dummy',
};
console.log(data);
this.router.navigateByUrl('/');
return new authenticationActions.AuthenticateSuccessAction(user);
})
.catch(error => { console.log(error); return Observable.throw(error); })
);
控制台记录数据变量并AuthenticateSuccessAction触发操作,因此正在执行路由器线,但导航不会发生.
我正在尝试使用辅助路由实现sidenav,但没有成功.
这是我的路由器的简化示例:
{
path: 'admin',
component: MainLayoutComponent,
children: [
{
path: '',
component: ReportsPageComponent
},
{
path: ':userID',
component: ReportsUserPageComponent,
resolve: {userID: UserIDResolver},
children: [
{
path: 'day-detail/:day',
outlet: 'sidenav',
component: DayDetailComponent,
resolve: {dayRange: DayRangeResolver},
},
]
},
]
}
main-layout.component.html:
<div class="content">
<router-outlet></router-outlet>
</div>
<router-outlet name="sidenav"></router-outlet>
然后在ReportsUserPageComponent中导航
this.router.navigate(['./', { outlets: { sidenav: ['day-detail', new Date().toJSON()] } }], { relativeTo: this.route });
这创造了这样的东西
admin/9/(sidenav:day-detail/2018-06-22T13:28:11.737Z)
问题是它不想加载DayDetailComponent.我需要这个作为ReportsUserPageComponent的子项,因为我不想要这样的东西,admin/(9//sidenav:day-detail/2018-06-20T22:00:00.000Z)因为我回去后,那些括号保留在那里(admin/(9))没有明显的原因.
我正在使用 Angular 6，但我在更改路线时遇到了问题。如果我使用 routerLink 或 navigate() 方法浏览应用程序，它会正常工作，因为它只加载新模块（如有必要）。但是，例如，如果我在此链接中：localhost:8080/home，我单击 URL，取消“主页”，输入“配置文件”并按 Enter，它正确进入配置文件页面，但应用程序已重新加载（也是应用程序组件）。为什么？我想不通。这是我的路由：
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
也许问题出在 auth-guard 上？
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private store: …我有一个应用程序，在该应用程序上我只需要在启动时提供登录功能，并且在用户进行身份验证后应该延迟加载所有剩余的代码。
我创建了一个core.module与核心routing.module和core.component来处理这个问题，但其子组件（例如DashboardComponent）正在呈现路由器出口元件内部的app.component.html，而不是在core.component.html 等标题没有被显示。
我已经搜索了很多，但找不到如何让这个工作。
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'signin', pathMatch: 'full' },
{ path: 'signin', component: SigninComponent },
{ path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'signin' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
应用程序组件.html
<router-outlet></router-outlet>
core-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ …我有一个用Angular8构建的现有应用程序，它的代码由一个网站和 2 个用于Android和 的移动应用程序共享，并IOS在Cordova. 它运行良好，但 Apple 宣布他们很快将不再支持使用UIWebView以下内容构建的应用程序：
自 2020 年 4 月起，App Store 将不再接受使用 UIWebView 的新应用程序和自 2020 年 12 月起使用 UIWebView 的应用程序更新。
所以我被迫将它迁移到WkWebView. 我知道在Cordova存储库和其他地方有几个线程讨论可能的迁移计划（例如，请参见此处）。
我还阅读了另一个问题，但它很旧（Angular 的不同版本）并且没有提供任何具体的解决方案。
所以我决定使用cordova-plugin-wkwebview-engine插件，这在我的情况下似乎是最简单的解决方案。
一切都很顺利，直到我在 IOS 模拟器中启动我的应用程序并看到路由不再工作。
我设法通过路由将问题减少到最小的 Angular 应用程序，你可以在这里看到它的工作。
我把重现问题所需的所有步骤都放在了这个存储库中。
以下步骤需要具有node,npm并cordova全局安装：
1. 克隆存储库：git clone https://github.com/sasensi/cordova-ios-angular.git
2. 移动到存储库目录：cd cordova-ios-angular
3. 安装依赖项：npm i
4. 创建cordova …
angular ×10
angular-router ×10
typescript ×2
angular6 ×1
canactivate ×1
cordova ×1
cordova-ios ×1
javascript ×1
nginx ×1
ngrx ×1
ngrx-effects ×1
rxjs ×1
wkwebview ×1