小编Dan*_*pel的帖子

您好，我正在 Angular 5 中使用路由，并且我有一个使用 canActivate 属性的登录路径

当 canActivate 为 false 时，我可以重定向到另一个路径吗？我不希望用户在登录后看到登录页面。

如果用户登录，这里主服务返回 false

{
    path: 'login',
    component: RegisterLoginComponent,
    canActivate: [MainService]
}

我试图在拦截器中引发可观察到的错误，然后处理该错误。但是我不能。如果成功为假，我也可以收到成功的订阅。

我尝试在中再次返回一个值next.handle(restReq)。但是我失败了，没有订阅任何东西

restApi这样返回

{
  "success": false,
  "data": {
    "name": "Bad Request",
    "message": "123",
    "code": 0,
    "status": 400,
    "type": "yii\\web\\BadRequestHttpException"
  }
}

验证服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private sessionUrl = '/wechat/session';

  constructor(
    private http: HttpClient
  ) { }

  getSession(): Observable<any> {
    return this.http.post<any>(this.sessionUrl, {});
  }
}

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService …

我已经将Angular 5应用程序迁移到了Angular6。除中的自定义脚本外，它都运行良好package.json。

当我ng deploy在终端中使用时，它显示以下错误：

指定的命令（“部署”）无效。有关可用选项的列表，请运行“ ng help”。您是说“帮助”吗？

以下是我的package.json文件

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
    "ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
    "deploy": "ng build --prod && npm run ngsw-config && npm run ngsw-copy"
},

我是Angular的初学者，正在Jasmine中为Angular6编写测试EmployeeComponent。我有一个错误

无法读取未定义的属性“控件”

我想我没有在employee.component.spec.ts文件中正确设置所有依赖项。我研究了几天，但没有结果。任何帮助将非常感激。

这是我代码中的基本流程。员工部分包含注册表。当用户单击时Submit，员工服务将向Firebase插入/更新数据。

以下是employee.component.html

 <div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group" *ngIf="page1">
        <label>Full Name</label>
        <input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
          This field is required.
        </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Email</label>
        <input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
            Invalid Email Address.
          </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Mobile</label>
        <input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
        <div class="invalid-feedback" *ngIf="submitted && …

我在这里有一个演示

我正在捕获scrollLeft一个滚动的元素。

是否可以用scrollLeft数字更新第二个div，以便两个div一起向左和向右滚动？

元素必须分开，但我需要它们一起滚动。

还是在Angular中有更简单的方法来做到这一点。

我在jQuery的Angular之外进行了此工作，但我不想在Angular中使用jQuery。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  isNavbarCollapsed = true;

  private scrollLeft: number
  //private scrolLTwo: HTMLElement = 

  onScroll(event: Event) {
    this.scrollLeft = (event.target as HTMLElement).scrollLeft;
    //console.log(this.scrollLeft);
    this.updateScroll();
  }

  updateScroll(){
    //Update second scrolling element
  }
}

我对 Observable 相当陌生，所以我相信必须有一种方法可以绕过我的 for 每个循环。

this.pages.forEach(page => {
  page.tasks = [];
  page.image = this.getImageData(this.proof.proofGuid, page.pageGuid);
  page.tasks = this.getPageTasks(this.order.orderNum);
});

这两个函数都从我的服务订阅了一个 observable，但是由于它们是异步的，所以 for 每个循环在数据返回并放在对象上之前就完成了。

getImageData(proofGuid, pageGuid) {
  this.proofService.getProofImage(proofGuid, pageGuid)
    .subscribe(image => {
      return image;
    });
}

getPageTasks(orderNum) {
  this.taskService.getTasksByOrderIdForProof(orderNum)
    .subscribe(data => {
      if (data) {
        return data;
      }
    });
}

现在我别无选择，只能循环获取每个页面的数据。我相信必须有一种方法可以基本上强制完成订阅，然后才能进入 for each 的下一页。

我想渲染动态选项卡，但我无法执行此操作。首次选项卡渲染良好，但当我们更改refreshTabs函数参数时，其选项卡会显示首次渲染选项卡。假设第一次加载APP_TEACHER_TABS元素，当它改变时，ADMIN它会渲染APP_TEACHER_TABS，APP_ADMIN_TABS但我只想渲染APP_ADMIN_TABS。

根选项卡.ts

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
import {TabInterface} from "../../models/tabsModels";
import {AuthProvider} from "../../providers/auth";
import {APP_ADMIN_TABS, APP_STUDENT_TABS, APP_TEACHER_TABS} from "../../constants";
import {SwitchAccountService} from "../../providers/switch-account";

@IonicPage({
  name: 'page-root-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-root-tabs',
  templateUrl: 'root-tabs.html',
})
export class RootTabsPage{

  tabs =[];
  userLabel: any;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeTabs();

  }

  initializeTabs(){ …

我正在玩Angular的（版本7）内容投影。据我所知，可以按属性，类和带有select属性的标签进行选择<ng-content>。

我也尝试通过ID选择：

<ng-content select="#myID"></ng-content>

从：

<mycomponent>
   <div id="myid">
        Test
   </div>
</mycomponent>

但这似乎不起作用。

为什么选择ID无效？

我已经阅读了许多关于使用路由器测试模块并尝试监视 router.navigate 方法的主题的帖子，但没有人解决我遇到的问题。每 2 次运行我的测试左右我都会看到错误，这是完整的第一行

Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'post/view'

重申仅在测试时运行我的应用程序时未看到错误

无论组件中有多少测试，它都只会出现一次，并且它始终是它发生的第一个测试，如果我切换顺序，那么它是新的第一个测试失败并出现此错误

我的组件如下（为简洁起见，删除了不相关的代码）

Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'post/view'

这是规范，再次删除了无关的测试

export class CreatePostComponent implements OnInit {

  constructor(private postService: PostService,
              private router: Router,
              private location: Location) {
  }

  submitPost() {
    this.validMessage = '';
    if (!this.createPostForm.valid) {
      this.validMessage = 'Please fill out the form before submitting!';
      return;
    }
    const post = this.createPostForm.value as IPost;
    this.postService.createPost(post)
      .pipe(first())
      .subscribe( …

我正在Angular 5 Visual Studio 2017版本15.6.7 TargetFramework中进行此开发-netcoreapp2.0 rxjs：5.5.10

我无法摆脱这个错误：

错误错误：未捕获（承诺）：错误：StaticInjectorError（AppModule）[VtoReportComponent-> Vtos]：StaticInjectorError（平台：核心）[VtoReportComponent-> Vtos]：NullInjectorError：没有Vtos提供者！

这是vto.service.ts

import { Component, OnInit } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import { Observable } from 'rxjs';
import { GroupDescriptor, DataSourceRequestState, DataResult, process, State } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { aggregateBy, SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { Vtos } from '../../services/vto.service';

import {
  GridComponent,
  GridDataResult,
  DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-vto-report',
  templateUrl: './vto-report.component.html',
  styleUrls: ['./vto-report.component.css']
})
export class …

我正在尝试使用打字稿函数设置图像 src 属性，但一次又一次地获得“无法设置未定义错误的属性”。我不明白我哪里做错了。

html代码：

<div class="panel-heading" style="border-bottom: 1px solid #cfdbe2; padding: 14px 15px;">
    <div class="pull-left">
        <img class="media-box-object img-circle thumb32" src="{{other_user_image}}" alt="Image" />
    </div>
    <div class="panel-title">User</div>
</div>

component.ts 代码：

export class ChatComponent implements OnInit {
    other_user_image: string;

    constructor(
        public authService: AuthService,
        afAuth: AngularFireAuth,
        public db: AngularFirestore,
        private router: Router) {}

    ngOnInit() {
    }

    openChatWindow(event: any){
        var target = event.target || event.srcElement || event.currentTarget;
        var idAttr = target.attributes.id;
        var value = idAttr.nodeValue;
        // var elem_id = (this.elem);
        console.log(value);
        var user_chat_room = this.db.collection("users").doc(value) …

我有 2 个名为 METADATA_SUCCESS_ACTION_1 和 SUCCESS_ACTION_2 的操作。我如何等待这两个操作完成，然后订阅合并数据。

this.actions
  .pipe(
    ofType(METADATA_SUCCESS_ACTION_1),
    take(1)
  )
  .subscribe((data1: any) => {
    console.log(data1)
  });

this.actions
  .pipe(
    ofType(SUCCESS_ACTION_2),
    take(1)
  )
  .subscribe((data2: any) => {
    console.log(data2)
  });

我想等待两次成功发生，然后处理作为元数据和成功数据的数据