标签: angular5

我目前的网址是：

https://localhost:8080/MyApp/manager/dashboard

在上面的 url 中，我只想获取https://localhost:8080/MyApp/部分。

有没有办法在没有硬编码的情况下获取它？

我正在尝试在我的电脑上安装 Angular 5。一切都安装正确，但是当我使用“ng-serve”命令运行我的应用程序时，它显示以下错误。

You are running version v8.7.0 of Node.js, which is not supported by Angular CLI v6.
The official Node.js version that is supported is 8.9 and greater.

Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.

Node.js 的当前版本是“8.7.0”，npm 是“6.0.0”。

经过大量搜索后，我按照以下步骤在 Windows 10 上更新我的 Node.js

npm cache clean -f
npm install -g n
n latest

但我无法使用此命令，它显示以下错误

C:\WINDOWS\system32>npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.

C:\WINDOWS\system32>npm install -g n …

我有一个要求，我需要根据模态窗口主体内的某些条件在 2 个不同的视图之间来回切换。

这两种观点是：

1. 列表项（初始视图）
2. 添加新项目

添加新项目后，我需要切换到列表项目视图。

注意：所有这些视图都应显示在模态窗口主体内。

那么使用 ANGULAR 5 路由如何在这个模态组件中创建新的路由/子路由？

我正在尝试在我的功能中选择状态时使用属性'take',但我收到了错误Property 'take' does not exist on type 'Store<State>.请问,任何人都知道发生了什么事吗？我想这样做的原因是因为我必须确定用户何时点击了"添加空间"按钮,这会将我的模板更改为表单.由于此模式也会更改父模板,因此我使用@ ngrx/store管理它.

我的代码:

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';

    import { Space } from '../../../shared/space.model';
    // import { SpacesService } from '../../spaces.service';
    import * as SpacesActions from '../../store/spaces.actions';
    import * as fromSpaces from '../../store/spaces.reducers';

    @Component({
      selector: 'app-space-item',
      templateUrl: './space-item.component.html',
      styleUrls: ['./space-item.component.scss']
    })
    export class SpaceItemComponent implements OnInit, OnDestroy {
      @Input() …

我创建了一个角度拦截器来检查我的身份令牌的有效性.不知何故,do角度无法识别该方法.subscribe工作,但我不想要这个解决方案,因为它将我的请求加倍发送到服务器.

TypeError: next.handle(...).do is not a function
at AuthTokenService.webpackJsonp.../../../../../src/app/commons/services/interceptors/auth-token.service.ts.AuthTokenService.intercept (auth-token.service.ts:37)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at XsrfService.webpackJsonp.../../../../../src/app/commons/services/interceptors/xsrf.service.ts.XsrfService.intercept (xsrf.service.ts:15)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpXsrfInterceptor.webpackJsonp.../../../common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2489)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:92)

这是我的拦截器代码:

import { Injectable, NgModule} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from 
'@angular/common/http';
import { SessionService } from 'app/commons/services/auth/session.service';
import { HttpErrorResponse } from "@angular/common/http";
import { StateService } from '@uirouter/angular'; …

我使用Firebase作为我的Angular 5应用程序的数据库.我能够使用ng build构建,运行和部署项目.但是,当我使用--prod标志构建时,我收到以下错误.

使用:

ng build --prod

我收到以下错误:

在"FirebaseModule"的模板编译期间出现错误错误在装饰器中不支持函数调用,但调用了"AngularFireModule".

我不明白如何配置AngularFire模块以使其工作.

Firebase.Module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { environment } from "../environments/environment";       // Firebase config stored in environment file

import { AngularFireAuthModule } from "angularfire2/auth";
import { AngularFireModule } from "angularfire2/angularfire2";
import { AngularFirestoreModule } from "angularfire2/firestore";

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),  // Error is here
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  exports: [AngularFireModule, AngularFireAuthModule, AngularFirestoreModule],
  providers: [],
  declarations: []
})
export class FirebaseModule {}

environment.ts(和environment.prod.ts)

export …

我正在使用角度5,我收到控制台错误:

无法绑定到'ngValue',因为它不是'mat-option'的已知属性

我的模板看起来如下所示:

  <mat-select placeholder="Select Book" name="patient" [(ngModel)]="selectedBook">
     <mat-option *ngFor="let eachBook of books" [ngValue]="eachBook">{{eachBook.name}}</mat-option>
  </mat-select>

我已经导入了两个MatSelectModule和MatOptionModule.

我们怎么解决这个问题？

我试图在角度使用货币管道显示整数价格,我不需要它为我的号码添加.00,事实是,它不是根据我的指示格式化它.这是我的HTML:

              <h5 class="price"><span>{{billingInfo.amount | currency:billingInfo.currencyCode:'1.0-0'}}</span> {{billingInfo.period}}</h5>

这是我的ts:

ngOnInit() {
      this.billingInfo = {amount: 100, currencyCode: 'USD', period: 'Hour'};
}

这是输出:

$100.00 Hour

我试图做的事情:

1.使用十进制数管道(没有好处,货币管道将其变成一个字符串)

2.add number formater(:1.0-0)到我的currencyPipe但似乎被忽略了

我错过了什么？

我正在尝试从Angular 5 SPA中的对象创建URL。我的代码如下所示：

import { UrlTree, UrlSegmentGroup, DefaultUrlSerializer, UrlSegment } from "@angular/router";

const urlTree = new UrlTree();
urlTree.root = new UrlSegmentGroup([new UrlSegment("EndPoint", {})], {});
urlTree.queryParams = {
  "param1": param1Value,
  "param2": param2Value
};
const urlSerializer = new DefaultUrlSerializer();
const url = urlSerializer.serialize(urlTree);

它确实可以完成这项工作，但对于这样一项琐碎的工作，它似乎包括了可观的开销，我想知道是否存在一种更直接的方法来从对象获取url。

我的期望是简单一些：

const url = someSerializer.serialize("/segment1/segment2", { 
  "param1": param1Value,
  "param2": param2Value
})

问题：如何从Angular 5+中的对象创建带有查询参数的URL字符串？

我有一个可以从父母和孩子编辑的变量.

parent.html:

 <div *ngIf="editEnabled">
  <mat-icon (click)="disableEdit()">cancel</mat-icon>
</div>

<child [(editEnabled)]="editEnabled"></child>

parent.ts:

export class ParentComponent {

   editEnabled: boolean;

   disableEdit(){
     this.editEnabled = false;
   }
}

Child.html:

 <div *ngIf="!editEnabled">
  <mat-icon (click)="enableEdit()">settings</mat-icon>
</div>

child.ts

private _editEnabled: boolean;

@Input()
 set editEnabled(value: boolean) {
  this._editEnabled = value;

}
get editEnabled(): boolean {
 return this._editEnabled;
}

enableEdit(){
     this.editEnabled = true;
}

但我不能在两个组件之间通信editEnabled.

我的错误在哪里？