标签: angular7

我正在使用 Angular 7 构建一个应用程序，我已经处理了 API 调用、使用 C# 的 JWT 令牌身份验证系统，并在必要时、用户登录和注销时更新了 LocalStorage()，所有这些都运行良好。

我的问题是我希望它作为应用程序中的中间件而不是在生命周期方法上运行登录检查 - ng.onInit()。我该怎么办？

有没有办法将生命周期事件作为入口组件或服务执行。也就是说，在加载任何组件之前，它能够检查用户是否登录并通过路由器重定向到所需的页面。

尝试获取元素引用名称但不起作用。如果有人知道请帮助找到解决方案。

Alert 应该像容器一样。因为那是元素引用。

应用程序组件.html：

<div (click)="test(event)" #container></div>

应用程序组件.ts：

test(e){
   alert(e.elementRef);
   //Output should be like alert("container");
}

当用户按 ALT+M 然后 ALT+E 键时，我想显示垫对话框模式。

在 Angular 7 中，我尝试按顺序调用两个不同的 API 方法。如果第一个成功，则需要调用第二个 API 方法。

如果第一个 API 响应代码是 500 内部服务器错误，则不应调用第二个 API。我还需要处理每个 API 调用的错误。

我尝试了 Promise、异步和等待方法，但是当我检查开发人员工具时，即使第一个 API 没有返回任何响应，也可以看到第二个方法被调用。

有人可以帮助我使用 concatmap 或任何其他 Angular 方法来实现这一目标吗？

public fetchandUpdate() {
    this.isSuccess= false;
    this.errorMessage = "";
    this.displayMessage = false;

     // First API call
      this.myService.getUserDetails(this.userid)
      .subscribe(
        (response) => {                           
          console.log('response received')
          this.userdetails= response;
        },
        (error) => {                              
          console.error('error caught in fetching user details')
          this.errorMessage = error;
          this.isSuccess= false;
        }
      )

    // Need to call this only if first API's response http status code is …

您好，我是角度为6的新手，我遇到了有关身份验证的问题，即无法从没有登录的任何页面中提取用户，我面临的问题是

类“ NeedAuthGuard”错误地实现了类“ CanActivate”。您是否要扩展“ CanActivate”并将其成员作为子类继承？类型“ NeedAuthGuard”缺少类型“ CanActivate”的以下属性：路径，路由[2720]

这是我的代码

           import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { LoginComponent } from '../Component/login/login.component';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})//NeedAuthGuard
export class ServiceTService {
  constructor(
    private http: HttpClient
  ) {
  }
  users: any = { 
    id: String,
    Email:String,
    Password: Number …

我试图以角度7传递一个来自api的地图,从父到子组件.

parent.ts:

export class AppComponent {
  title = 'taurs-frontend';
  categories: any;
  isLoggedIn = false;

ngOnInit(){
    this.roomDataService.getData(`${environment.api_url}/api/Categories`)
    .subscribe(categories => {
      this.categories=categories
    }); 
  }

parent.html:

 <app-room-card [categories]="categories"></app-room-card> 

child.ts:

@Component({
  selector: 'app-room-card',
  templateUrl: './room-card.component.html',
  styleUrls: ['./room-card.component.css']
})
export class RoomCardComponent implements OnInit {
    @Input('categories') catname: any;

    ngOnInit() {
        console.log('aaa'+ this.catname);
    }
// ..
}

当我尝试记录变量时catname,它是未定义的.如果我尝试从父项导入变量标题,一切正常.如何将类别传递给子项,并使用API​​调用中的值填充它？

我的代码在Angular7中，使用@ ngrx / store7，有时我会得到未定义状态（仅针对特定状态）

它始终是“历史”状态。

我的应用程式状态：

export interface IAppState {
  router?: RouterReducerState,
  delivery: IDeliveryState,
  events: IEventsState,
  families: IFamiliesState,
  googleDrive: IGoogleDriveState,
  spinner: ISpinnerState,
  user: IUserState,
  volunteerConstraints: IVolunteerConstraintsState,
  volunteers: IVolunteersState,
  history: IHistoryState
}

export const initialAppState: IAppState = {
  delivery: initialDeliveryState,
  events: initialEventsState,
  families: initialFamiliesState,
  googleDrive: initialGoogleDriveState,
  spinner: initialSpinnerState,
  user: initialUserState,
  volunteerConstraints: initialVolunteerConstraintsState,
  volunteers: initialVolunteersState,
  history: initialHistoryState
};

export function getInitialState(): IAppState {
  return initialAppState;
}

我的历史记录状态：

export interface IHistoryState {
  familyHistory: Array<FamilyHistoryModel>;
  familyHistoryPending: boolean;

  routeHistory: Array<RouteHistoryModel>;
  routeHistoryPending: boolean;

  deliveryHistory: Array<DeliveryHistoryChartModel>;

  volunteerRating: …

实际上，我想知道角度版本的实际差异-最近发布的Beta版本的8和7。

我进行了相同的研究，但无法理解这些版本的确切差异–角度7和角度8。

我已经创建了angular 7应用程序，现在我正尝试向它添加angular通用程序。因此，我遵循了以下步骤：

https://angular.io/guide/universal

在终端中输入以下内容：

ng add @nguniversal/express-engine --clientProject resume-app

然后我这样写：

npm run build:ssr && npm run serve:ssr

它不起作用，终端返回了很多错误：

错误：无法解析/Users/tomaszzmudzinski/Documents/Projects/Resume/resume-app/src/app/components/home/home.component.ts中的HomeComponent的所有参数：（？，？）。src / app / components / home / home.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / home / home.component.ts（3,31）：错误TS2307：找不到模块“ src / app / services / resume.service”。src / app / components / home / home.component.ts（4,44）：错误TS2307：找不到模块“ src / app / models / GetBasicStatisticsResponse”。src / app / components / home / home.component.ts（5,35）：错误TS2307：找不到模块“ src / app / services / statistics.service”。src / …

在npm run build时间显示的错误

    Parser Error: Binding expression cannot contain chained expression at the end of the expression [getImageUrl(image, true);] in E:/Work/JamesJ/Pixie/pixie-image-editor/source/src/app/image-editor-ui/panels/open-sample-image-panel/open-sample-image-panel.component.html@34:9 ("

<div class="samples" *ngIf="sampleImages" >
    <img [ERROR ->][src]="getImageUrl(image, true);" *ngFor="let image of sampleImages" (click)="openSampleImage(image)"")
: Parser Error: Binding expression cannot contain chained expression at the end of the expression [getImageUrl(image, true);] in E:/Work/JamesJ/Pixie/pixie-image-editor/source/src/app/image-editor-ui/panels/open-sample-image-panel/open-sample-image-panel.component.html@34:9 ("

<div class="samples" *ngIf="sampleImages" >
    <img [src]="getImageUrl(image, true);" [ERROR ->]*ngFor="let image of sampleImages" (click)="openSampleImage(image)">
</div>")
: Parser Error: Binding expression cannot contain chained expression at the …