标签: angular5

我正在尝试在我的功能中选择状态时使用属性'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() …

我创建了简单的angular5组件HelloComponent:

var HelloComponent = function () {
};

HelloComponent.annotations = [
  new ng.core.Component({
    selector: 'hello-world',
    template: 'Hello World!'
  })
];

接下来,我尝试在angularJS指令中使用此组件,如:

angular.module("app", [])
.directive("helloWorld", ng.upgrade.static.downgradeComponent(HelloComponent))

但是在运行此脚本时出现此错误:

错误:[$ injector:unpr]未知提供者:$$ angularLazyModuleRefProvider < - $$ angularLazyModuleRef http://errors.angularjs.org/1.6.5/ $ injector/unpr？p0 =%24%24angularLazyModuleRefProvider%20%3C-% 20%24%24angularLazyModuleRef

查看带角度5和angularJS的简单示例:http://plnkr.co/edit/dQJ2tgV2MuInT41ucjq1

如何解决这个问题？

附加信息

将组件从v4降级到v1的示例也存在:https://hackernoon.com/angular-v4-hybrid-upgrade-application-73d5afba1e01

但是当我试图用这篇文章重新制作我的应用程序时,我得到另一个错误:

未知提供者:$$ angularInjectorProvider

请参阅第4节的示例:http://plnkr.co/edit/9Oxy0QeSg1FYve0cjGYw

v5的相同示例返回旧错误:

未知提供者:$$ angularLazyModuleRefProvider

请参阅v5的示例:http://plnkr.co/edit/eZScm8U41mGuuHJMjApV

我创建了一个角度拦截器来检查我的身份令牌的有效性.不知何故,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.

我们怎么解决这个问题？

我在Angular5项目中有这个import语句:

import {plugins, SCECodeGenType} from 'sce-plugins/code-generation';

这解析了我的文件系统上的这个路径:

/Users/.../suman-chrome-extension/node_modules/sce-plugins/code-generation/index.d.ts

在构建应用程序时ng build -w,我收到此错误:

ERROR in ../sce-plugins/code-generation/index.ts Module build failed: Error: /Users/alexamil/WebstormProjects/oresoftware/sumanjs/sce-plugins/code-generation/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:662:23)
    at plugin.done.then (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>  @ ./src/app/shared/services/lang.service.ts 14:24-62  @ ./src/app/app.module.ts  @ ./src/main.ts  @ multi ./src/main.ts

我相信这是因为我npm link用来链接'sce-plugins'项目以进行本地开发.

我npm link在这里看到与Angular5项目一起使用的一些问题:

https://github.com/angular/angular-cli/issues/3875

https://github.com/angular/angular-cli/issues/8677

https://github.com/angular/angular-cli/issues/9376

有谁知道如何解决？

更新:

它似乎与npm linkperse或符号链接没有关系.如果我只是将本地目录复制到node_modules/sce-plugins,我会得到同样的错误. …

我试图在角度使用货币管道显示整数价格,我不需要它为我的号码添加.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但似乎被忽略了

我错过了什么？

我3天前开始学习角度,所以我很陌生.我还使用angularJS和React开发应用程序,我想我不明白角度5组件是如何完全工作的.如果我创建一个自定义文本的自定义按钮(我不是说这应该以这种方式完成,但这是一个显示我的观点的简单示例),如下所示:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

渲染的DOM导致:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

这是不可读的,我想知道是否有办法删除这个包装元素,只是放置组件布局替换标签导致以下结构:

<button>
  <span>
    My Text
  </span>
</button>

如果没有办法删除它们你的建议是什么？谢谢!

我正在尝试从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.

我的错误在哪里？