我在 Angular 中使用canActivateusing guards。我想检查用户是否经过身份验证并根据结果保护路线。有两种类型的用户：Type1和Type2，因此用户可以通过Type1、Type2或进行身份验证unauthenticated。以下guard内容供Type1用户使用。
这是我的代码：
constructor(private authservice: AuthService, private router: Router, private route: ActivatedRoute){}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean{
const self = this;
const expectedType = "type1";
this.authservice.isUserAuthenticatedbyType(expectedType).then(
function(data){
if(data === false){
console.log(data);
self.router.navigate(['/'], {relativeTo: self.route});
}
return data;
},
function(error){
self.router.navigate(['/']);
return false;
}
);
return false;
}
问题是我进行了 API 调用以验证用户是否已通过身份验证并return false;在 API 结果之前执行。所以，暂时我看到一个不同的页面，然后它被路由到正确的页面。我该如何解决这个问题，我不想在 API 调用之前返回 …
我试图将MatSnackbar模块定位在页面顶部.
我试过用它config来添加customclass.这是我的代码:
component.ts
let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);
的CSS
.red-snackbar{
position: absolute !important;
top: 54px;
}
但它没有用.是否可以重新定位MatSnackbar？
在我中，app.component.ts我正在进行 API 调用并获取userDetails. 然后我发出这个userDetails。我已经userDetails在我的header组件中订阅了这个。我的头组件使用app-my-image-logo组件。在页面刷新时，调用 API 并获取 userDetails。之后，事件被发出，因此testnDisplay方法被调用。但我的问题是每隔几秒钟，我在控制台上得到以下输出。
img my-image-logo.component.ts:28
name my-image-logo.component.ts:28
img my-image-logo.component.ts:28
name my-image-logo.component.ts:28
img my-image-logo.component.ts:28
name my-image-logo.component.ts:28
img my-image-logo.component.ts:28
name my-image-logo.component.ts:28
所以，这个方法在频繁的间隔后被多次调用，但它应该只被调用一次。
头文件.component.html
<app-my-image-logo ></app-my-image-logo>
header.component.ts
ngOnInit() {
const self = this;
this.userDetails = this.dataService.getUserDetails();
this.dataService.userDetailsEvt.subscribe(
function(data){
self.userDetails = data;
}
);
}
这是app-my-logo组件。
app-logo.component.html
<img #imgDiv [hidden]="testnDisplay('img')" >
<div [hidden]="testnDisplay('name')"
></div>
app-logo.component.ts
testnDisplay(type){
console.log(type);
}
这是我的dataService：
数据服务.ts
setUserDetails(userDetails){
this.userDetails …我有一个角度组件：
drawComponent：它有很多按钮，如绘制矩形、绘制圆形等。我使用的是 paperjs，它有助于实际绘制。我有一些更新的常见对象。例如，我有一个 paperjs 对象，每当我绘制任何形状（圆形、矩形或任何其他形状）时，该对象都会更新。
我的问题是我drawComponent.component.ts的代码太大了，超过 2000 行。在 nodejs 中，我可以轻松地将每个函数拆分到一个单独的文件中，但是在 angular 中我不知道该怎么做。有什么办法可以根据功能将我的文件拆分成单独的文件吗？
我正在尝试使用routerLink如下功能：
<a class="nav-link" [routerLink]="callHome(data)">Home </a>
callHome(data){
//perform some operations
this.router.navigate(["/home"]);
}
这里的问题是，每当我刷新页面时，即使没有单击Home，它也会自动导航到/home。
我尝试过的另一种选择是：
<a class="nav-link" [routerLink]="['/home']">Home </a>
在这里，尽管可以使用，但导航之前无法执行操作。
我不能使用按钮也不能使用，(click)因为我也希望它link也可以。如果我使用按钮，则该按钮link消失了。
如何[routerLink]与函数调用一起使用？