我正在尝试制作旧时尚应用程序的 Angular 2 版本。有一项服务会向服务器发送重复请求以检查用户是否正在登录。登录守卫将检查轮询以查看登录会话结果（从请求中获取）是否有效，以便向路由返回正确的信号。
这是我的服务功能：
getUser(): Observable<User> {
return this.http.get<User>(this.userUrl);
}
这是我的守卫的 canActive 函数：
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
// const isLoggedIn = this.authService.isLoggedIn();
return this.authService.getUser().flatMap((data) => {
console.log(data);
if (data.id === 1 && data.name === 'Beany' ) {
console.log(1111)
return Observable.of(true);
} else {
console.log(2222)
this.router.navigate(['pages/login']);
return Observable.of(false);
}
});
该路线有效，但只有 1 次。不确定是否可以重复此操作（当请求完成时，服务将重新向服务发送检查，当然我应该为此设置一点超时）？
我正在尝试构建一个类似于谷歌地图的以地图为中心的应用程序。所以主要有一个地图，并且根据 url 路由，在一个小侧面板内加载一个组件。
export const routes: Routes = [
{path: 'home/:coordinates', component: HomeComponent},
{path: 'dashboard/:coordinates', component: DashboardComponent},
{path: 'utils/:coordinates', component: UtilsDemo},
];
我想要实现的目标类似于谷歌地图：
/home/@54.072,-2.899 --> 加载HomeComponent并导航到坐标 54.072,-2.899
/dashboard/@53.123,2.345--> 加载DashboardComponent并导航到坐标 54.123,2.345
但是，:coordinates参数不应该是组件的本地参数，而应该是全局的。否则我必须在每个组件内完成导航部分。
换句话说：如果我这样做：
this.route.params.subscribe(params => {
console.log(params['coordinates']);
});
从内部来看AppComponent，参数未定义。它仅在每个特定组件内部起作用。
Angular5 有什么办法可以实现这一点吗？
我的组件中有公共变量 url 和标题字符串，如下所示：
const url: string = 'locator;name=Test';
const title: string = 'Test';
我想在我的模板中使用它来获取如下链接：
<a mat-button [routerLink]="'/' + url">{{title}}</a>
问题是生成的链接都是错误的。我知道 routerLink 可以与字符串一起静态使用，但是如何向模板提供变量，因为这种方式不起作用：
<a mat-button routerLink="'/' + url">{{title}}</a>
我怎么解决这个问题？我从服务中收到这些链接，但无法重构它。现在我正在这样解决这个问题，但我遇到了问题，因为每次我单击这些链接时都会重新加载网页：
<a mat-button [href]="'/' + url">{{title}}</a>
我有一个路由模块如下：
应用程序路由模块
const routes: Routes = [
{
path: '',
redirectTo: environment.devRedirect,
pathMatch: 'full',
canActivate: [AuthenticationGuard]
},
{
path: 'customers/:customerId/contracts/:contractId',
loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
canActivate: [AuthenticationGuard],
}
];
以及一个带有路由的子组件：
const routes: Routes = [
{
path: 'create',
component: CreateEditComponent,
data: { animation: 'create' },
canActivate: [ AuthenticationGuard ]
},
{
path: ':groupId/edit',
component: CreateEditComponent,
data: { animation: 'edit' },
canActivate: [ AuthenticationGuard ]
},
{
path: '',
component: OverviewComponent,
data: { animation: 'overview' },
canActivate: [ AuthenticationGuard ]
}
];
我有一个顶级导航栏组件，位于 app.component.html …
我想更改网址而不重新加载页面。我使用定位服务，例如：
this.location.replaceState(`mynewurl`);
当我返回时，历史记录并不好。我找到了 html5 PushState 解决方案。
我问是否没有像 Location 这样的服务可以处理 Angular 上的 PushState
我有一个名为MyPageModule导入多个模块的复杂模块，它为 Service 提供以下注释@Injectable( { providedIn: 'root' } )。
这个模块是通过延迟加载导入的，如下所示：
// AppRoutingModule
...
{
path: 'my-page',
loadChildren: './lazy-loader-modules/lazy-loader-mypage/lazy-loader-mypage.module#LazyLoaderMyPageModule'
}
...
// LazyLoaderMyPageModule
@NgModule({
declarations: [],
imports: [
CommonModule,
MyPageModule
]
})
export class LazyLoaderMyPageModule { }
我想要的行为（实际情况并非如此）： 当 url 与 /my-page/* 不同时，我希望 MyPageModule 导入的所有服务都被销毁。
我怎样才能做到这一点 ？
我有一个重定向到另一个页面的功能，我希望在重定向后重定向的页面也重新加载。
我想在重定向到登录页面后重新加载它。使用 'window.location.reload()' 重新加载当前页面，即主页而不是登录页面。如何重新加载特定页面？
主页组件.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators, Form } from '@angular/forms';
import { LoginComponent } from '../authentification/login/login.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
ngOnInit(): void {
}
constructor(private router: Router) { }
redirection(){
this.router.navigate(['/login']);
}
}
javascript typescript angular-routing angular angular-router
如何在.html文件中使用routerLink ？我使用下面的代码,但它不起作用.
<div class="container">
<header class="page-header">
<ul class="nav nav-pills">
<li routerLinkActive="active">
<a [routerLink]="['/register']">Register<`/a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/login']">Login</a>
</li>
</ul>
</header>
<p class="jumbotron">
<router-outlet><router-outlet>
</p>
在app.component.ts我提到过templateUrl: 'index.html'.
我只希望视图在路线更改时淡入淡出。我似乎正确设置了组件，但我需要正确设置动画语法。
这是我目前的动画尝试。我将此动画导入到我的组件中：
import {trigger, state, animate, style, transition} from '@angular/animations';
export function routerTransition() {
return fadeInAndOut();
}
function fadeInAndOut() {
return trigger('routerTransition', [
transition(':enter', [
style({opacity: 0}),
animate(3000, style({opacity: 1}))
]),
transition(':leave', [
animate(3000, style({opacity: 0}))
])
]);
}
这是导入过渡的组件之一：
import { Component } from "@angular/core";
import { routerTransition } from "../../animations/fade.animation";
@Component({
selector: "about-users",
templateUrl: "./about.component.html",
animations: [routerTransition()],
host: { '[@routerTransition]': '' }
})
export class AboutComponent {
constructor() {
}
}
嘿所以我有一个非常奇怪的问题,我在设置角度路由之前没有遇到过,当我试图延迟加载另一个模块时,我不断收到此错误 Error: Cannot find module "app/feed/feed.module"
从这里开始是我的设置
另外需要注意的是,我刚刚更新了所有的全局npm软件包后生成了一个新的角度项目,因此列出的内容在我运行之前已经更新到了 ng new app-name
这是我的app-routing.module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const rootRoutes: Routes = [
{ path: '', redirectTo: 'feed', pathMatch: 'full' },
{ path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];
@NgModule({
imports: [RouterModule.forRoot(rootRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
然后app.module我在上面导入这个模块:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
], …