标签: angular5

我的 Angular 应用程序中有两个组件（Component1 和 Component2）。我在我的应用程序组件中呈现了这两个组件。现在我想将一个值从 Component1 发送到 Component2。如何发送。有没有最佳实践？？

在 Component1 我有一个这样的代码。组件1.html

<button (click)="passData()">Click Me</button>

组件1.ts

import { Component, OnInit , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

   Component1Variable:string="Component1VariableSent";
  constructor() { }
  ngOnInit() {
  }
   @Output()
   SendValue=new EventEmitter<string>();
   passData()
   {
        this.SendValue.emit(this.Component1Variable);
   }
}

在 Component2.html 我有

<app-component1 (SendValue)="ValueFromComp1($event)"> </app-component1>
{{ValueFromComponent1}}

在 Component2.ts 我有

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

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

我想使用 ng-container 从 ngFor 中调用 ng-template

我的列表是一个数组，并有一个对象列表。对象的一个​​属性是标题 - 在 ng-template 中可见。

网址：

<ul>

    <li *ngFor='let item of list;let i = index'>

        <ng-container *ngTemplateOutlet="itemTemplate;context:item"></ng-container>

    </li>

</ul>

<ng-template #itemTemplate let-item="item">
    <p>{{ item?.title }}</p>
</ng-template>

注意：问题是 let-item 似乎未定义或为空对象。这很奇怪，因为我传入了它。

我对库 ngx-permissions 的指令有问题。这些是我的 angular 依赖项的版本：

    "@angular/animations": "^5.0.3",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/router": "^5.0.3",

我正在关注这个例子。

我正在使用模块的版本：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我可以毫无问题地使用这些服务，但只有指令出错。错误是下一个：

Can't …

我有一个带有 Angular 5.1.0 ClientApp (VS 2017 v15.4.5) 的 ASP.NET Core 2.0 项目。尝试使用 ngx-cookie-service。

我按照说明导入 ngx-cookie-service，但是每当我尝试将其 DI 到组件或服务构造函数中时，我都会得到这个

错误：

NodeInvocationException: StaticInjectorError[CookieService]: 
StaticInjectorError[CookieService]: 
NullInjectorError: No provider for CookieService!
Error: StaticInjectorError[CookieService]: 
StaticInjectorError[CookieService]: 
NullInjectorError: No provider for CookieService!

app.module.browser.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppModuleShared } from './app.module';
import { AppComponent } from './components/app/app.component';
import { HttpModule } from '@angular/http';
import { CookieService } from 'ngx-cookie-service';

@NgModule({ …

我想将我的枚举显示为字符串，但将其显示为数字。

我正在从Web服务接收json对象，并将其映射到我的Typescript对象

getProperties(): Observable<Property[]> {
    return this.http.get<Property[]>(this.getallagentsproperties + '1');
}

export enum LetType {
    Notspecified = 0,
    LongTerm = 1,
    ShortTerm = 2,
    Commercial = 4
}

export class Property {
    ...other stuff...
    letType: LetType;
    ...other stuff...
}

我的组件会进行调用并将其添加到相关属性中

import { Component, OnInit } from '@angular/core';
import { Property } from './Property';
import { PropertyService } from '../properties.service';

@Component({
  selector: 'app-properties',
  templateUrl: './properties.component.html',
})

export class PropertiesComponent implements OnInit {
  properties: Property[];
  constructor(private propertyService: PropertyService) { }
  ngOnInit() {
    this.getProperties() …

我正在尝试重新创建一个非常类似于ngrx文档的authEffect,并收到此错误消息: Error: StaticInjectorError(AppModule)[HttpClient -> HttpHandler]: StaticInjectorError(Platform: core)[HttpClient -> HttpHandler]: NullInjectorError: No provider for HttpHandler!

效果服务:

@Injectable()
export class HttpEffects {
  constructor(private http: HttpClient, private actions$: Actions) {}

  @Effect() login$: Observable<ActionWithPayload> = this.actions$.pipe(
    ofType(ActionTypes.SEND_LOGIN),
    mergeMap((action: ActionWithPayload) =>
      this.http.post(SERVER_URL + LOGINAPI.LOGIN, action.payload, config).pipe(
        map(data => ({type: 'LOGIN_SUCCESS', payload: data})),
        catchError(() => of({type: 'LOGIN_ERROR'}))
      ))
  );
}

app.module:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    StoreModule.forRoot(rootReducer),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    }),
    EffectsModule.forRoot([HttpEffects])
  ],
  exports: [
    BrowserAnimationsModule
  ],
  providers: …

我使用的角度做出酥料饼一次只能出现一次,这是plunker我使用angular5与NRX个自举.

因为我在项目中需要多个弹出框,但是如果我们按右上角的(x),弹出框应该关闭.

如果您先按下切换按钮,然后按"弹出标题和斧头按钮!",切换当前可以使用2个弹出窗口.如果弹出窗口当前打开,我的目标是禁用其他弹出窗口.

示例有4个popover,popover 1-4.如果popover 1打开,则无法打开其他弹出窗口.

如果我们关闭popover 1,其他popover可以打开.

<div>
  <ng-template #popoverContent3>
    <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
      <p>this is a title...
      <button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      </p>
    </div>
    <div>
     <p>The best looking pop over, with a TITLE!</p>  
    </div>
  </ng-template>
  <br><br><br><br><br><br><br>
  <a  [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false"  placement="right">
   Pop over with title and a x button!
    </a>
</div>
<p>
  <span popover="Hello there! I was triggered by input"
        triggers=""  [isOpen]="isOpen">
  This text has attached popover
  </span> …

我无法使Angular 5 Validators.pattern工作.我已经尝试了应该正常工作的每个正则表达式,但它不起作用.我读到Validators.pattern需要不同的格式,但我似乎无法找到它...

任何想法Validators.pattern应该是什么

(1)只允许数字,正面和负面

和

(2)仅允许数字,正数和负数,可选,最多2位小数

有效的例子是:1 1.2 1.22 -21 -21.48

任何带有任何字母的内容都将无效.

谢谢你的帮助!

部署代码时出现此错误。

src / app / app.module.ts（26,49）中的错误：错误TS2339：类型'{不存在属性'firebaseConfig'{production：boolean; }'。

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { ContactsComponent } from './contacts/contacts.component';
import { ContactComponent } from './contacts/contact/contact.component';
import { ContactListComponent } from './contacts/contact-list/contact-list.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr'; …

我看待它的方式,用模型定义对象似乎使它们变得僵硬并且变化容忍度更小,从而使得将来更容易破坏应用程序并添加代码行而无法获得.例如,我可以有一个get方法,它从API返回一个视频对象,并将其编程为Any或定义的模型.

/model/video.ts

export interface Video {
// my code
 }

/pages/videos.ts

getAllVideos(): Promise<Video> {
// my code
}

与

/pages/videos.ts

getAllVideos(): Promise<Any> {
// my code
}

我看待它的方式.更少的代码行,更少的复杂性,更少的文件和更少的刚性是一件好事.为什么要定义模型？