标签: angular

我正在使用Angular 5，并且想要更改占位符文本的颜色。列表中的文本内容可以正常工作（我可以更改颜色），但是占位符却不能。我不是通过应用程序的主要CSS搜索硬编码的解决方案，而是需要通过代码动态地对其进行更改。

<mat-form-field>
    <mat-select placeholder="{{'TXTKEY' | translate }}" [style.color]="config.textColor">
        <mat-option *ngFor="let item of items" [value]="item.identifier" (click)="OnChange(item)">
            <div [style.color]="config.textColor"> {{item.name}}</div>
        </mat-option>
    </mat-select>
</mat-form-field>

我想在我的应用程序的几个部分中使用Angular组件,包括在延迟加载的模块中的组件中.我不知道如何声明组件在惰性模块中使用它.我将向您展示不同文件的一些相关部分:

app.module.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';


@NgModule({
  declarations: [
      AppComponent, 
      (...)
      FpgTimeComponent

app.routing.ts

const appRoutes: Routes = [

    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    {
        path: 'customer',
        component: CustomerComponent
    },
    {
        path: 'lazy',
        loadChildren: 'app/lazy/lazy.module#LazyModule'
    }
];

lazy.module.ts

import { FpgTimeComponent } from '../fpgTime/fpg-time.component';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [routing],
    declarations: [
        LazyComponent, 
        FpgTimeComponent
    ]
})

该应用程序加载,但当我进入惰性路由时,它会抛出以下错误:

未捕获(承诺):错误:类型FpgTimeComponent是2个模块的声明的一部分:AppModule和LazyModule!请考虑将FpgTimeComponent移动到导入AppModule和LazyModule的更高模块.您还可以创建一个新的NgModule,它导出并包含FpgTimeComponent,然后在AppModule和LazyModule中导入该NgModule.

我没有在任何地方导入LazyModule,因为它是懒惰加载的.那么,我如何声明组件FpgTimeComponent能够在惰性模块(以及非惰性组件)中使用它？

提前致谢,

我正在考虑在有角度的应用程序中实现撤消，重做功能的方法。

第一个也是最基本的想法是使用一个完全描述应用程序内部的模型，称之为AppModel。对于每个值得记录的更改，您只需创建一个新对象AppModel并将其推入堆栈并更新currentIndex。

在绝对最坏的情况下，AppModel的对象必须填写500个文本字段，平均长度为20个字符。每次更新就是10000个字符或10kB。

这个数字有多糟？我不认为这是否会导致内存问题，但是否会使每次推送堆栈时应用程序冻结？这是一个基本的实现：

  historyStack: AppModel[];
  currentIndex:number = -1;

  push(newAppModel:AppModel){
    //delete all after current index
    this.historyStack.splice(++this.currentIndex, 0, newAppModel);
  }

  forward(){
    if(this.currentIndex < this.historyStack.length-1){
      this.currentIndex++;
      return this.historyStack[this.currentIndex];
    }
    return this.historyStack[this.currentIndex];
  }
  back(){
    return this.historyStack[this.currentIndex--];
  }

我想到的另一种选择是存储执行redo和reverse操作的函数调用。这种方法将需要我还存储哪些对象需要调用函数。用户可能会删除这些对象，因此还必须有一种重新创建对象的方法。当我输入时，这变得很痛苦:)

您推荐什么方式？

我在Angular4中有一些经验,但我只是继承了一段使用FormControls的代码,我不知道如何使用它们.我正在设置一个注释textarea,如果isRegulatoryAuditRequired的值等于false,则需要该注释.我已经获得了必填字段,但是如果value为false并且提交了表单,我需要显示消息"需要评论".这是我的HTML,有两个单选按钮,一个textarea和一条消息标签:

<div class="btnWrapper">
              <div class="leftBtn">
                <span class="col-xs-12 no-padding">
                  <label>
                    <input type="radio" id="radio1" class="app-input-radio" name="isRegulatoryAuditRequired" [value]="true"
                           [checked]="isRegulatoryAuditRequired==true" formControlName="isRegulatoryAuditRequired" />
                    <span class="app-input-radio pull-left"></span>
                    <span class="plx5 pull-left radioText ">Yes</span>
                  </label>
                </span>
              </div>
              <br />
              <div class="rightBtn">
                <span class="col-xs-12 no-padding">
                  <label>
                    <input type="radio" id="radio2" class="app-input-radio" name="isRegulatoryAuditRequired" [value]="false"
                           [checked]="isRegulatoryAuditRequired==false" formControlName="isRegulatoryAuditRequired" />
                    <span class="app-input-radio pull-left"></span>
                    <span class="plx5 pull-left radioText ">No</span>
                  </label>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mbx20">
        <div class="col-sm-4">
          <div>
            <label>Why is the regulatory audit being performed or provide additional comment?</label>
            <div>
              <textarea …

正如您可能从角度材料文档中了解到的那样,mat-expansion-panel将@Output命名为"opened",这是在打开手风琴项目时发出的.我想抓住那个打开的事件并确定哪个面板被打开了.但是这个简单的代码(下面)总是只返回undefined.我做错了什么？此输出是仅发出未定义还是我错过了什么？材料文档没有说明这种情况.

component.html

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}

我有一个服务调用,当它返回404错误时,我想显示当状态为404时来自服务器的消息.所以,如果出现错误或成功,我会得到一个json的帖子给我一个状态代码和消息,指示它是否成功.

好吧,我有这个服务电话:

 this._transactionService.findExistingTransaction(user, searchNumber)
       .subscribe(data => {

       this.transactionResponse = data;
       console.log(JSON.stringify(this.transactionResponse));

       this.router.navigate(['/edit-transaction-portal'], {queryParams: {bill: searchNumber}});

       this.onDismiss();
      }, (err) => { this.displayErrors = true;});

出错时,它会设置bool displayErrors = true然后我可以在我的UI中显示错误消息.

在HTML代码中:

 <input #inputtedNumber class="transactionInput" placeholder="{{numberPlaceholder | translate }}"/>
        <div class="error-msg1" *ngIf="displayErrors" style="margin-left:90px;" name="errorMsg">
           {{transactionResponse._errorDetails._message}} </div>

这是我直接尝试访问api端点时回发的json:

{  
   "_transactionNumber":null,
   "_order":null,
   "_errorDetails":{  
      "_status":"404",
      "_message":"Number is not available"
   }
}

我绑定到从服务调用中返回的transactionResponse对象.不幸的是,尽管我认为这应该有效,但我得到的问题是_errorDetails未定义,因此没有任何显示.

我想知道这是否适合这样的设置？如果现在,我该如何解决？

谢谢!

编辑:重复SO帖子没有答案:如何从Angular 4/2中的后端读取自定义错误消息

我们在Kubernetes集群上托管了基于Angular的Web应用程序.此应用程序的Ingress配置为添加基本URL:

{
  "kind": "Ingress",
  "apiVersion": "extensions/v1beta1",
  "metadata": {
    "name": "test-app",
    "namespace": "acceptance-testing",
    ...
    "annotations": {    
      "kubernetes.io/ingress.class": "nginx",
      "nginx.ingress.kubernetes.io/add-base-url": "true",
      "nginx.ingress.kubernetes.io/rewrite-target": "/",
      "nginx.ingress.kubernetes.io/ssl-redirect": "true"
    }
  },
  "spec": {
    "rules": [
      {
        "http": {
          "paths": [
            {
              "path": "/at/test-app",
              "backend": {
                "serviceName": "test-app",
                "servicePort": 80
              }
            }
          ]
        }
      }
    ]
  },
  ...
}

当我们在浏览器中输入包含客户端路由部分的URL时,ingress会将整个URL添加为在我们的场景中不正确的基础.

例如,对于https:// server/at/test-app/some-page请求基本URL应为https:// server/at/test-app /但我们接收https:// server/at/test-app /一些页/

我们已经切换到Angular哈希路由位置策略,现在它正常工作但我们想知道是否有某种方法使位置路由策略与nginx入口一起工作？

预先感谢您的帮助.

最好的祝福

我目前正在向我们公司使用的Angular应用添加语言环境。经过一番思考，我们决定采用Angular 5+本机i18n支持。

但是据我了解，每次生成翻译文件时都会创建ng xi18n --outputPath src/locale/ --locale en一个新文件。这意味着，每次添加新的i18n标记时，已经包含旧翻译的先前XLF文件都需要与新翻译合并。

这似乎很麻烦，因此我的问题是：是否有办法将新的反式单元仅附加到已经存在的XLF文件中？还是已经有一个工具可以将这两者合并在一起？

我正在使用https://github.com/dschnelldavis/angular2-json-schema-form,我的表单HTML是:

<json-schema-form
[schema]="schema"
(onSubmit)="exampleOnSubmitFn($event)">
</json-schema-form>

我schema是:

this.schema = {
  type: "object",
  properties: {
    CCN: {
      required: true,
      type: "number",
      minimum: 1000000000,
      maximum: 99999999999999999999
    },
    Quarter: {
      type: 'string',
      required: true,
      enum: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    Year: {
      type: 'string',
      required: true,
      enum: ['2018', '2019', '2020']  
    },
    covered_medi: {
      title: "Covered by Medicare/Medicaid",
      type: "number",
      required: true
    },
    covered_private: {
      title: "Covered by private insurance",
      type: "number",
      required: true
    },
    Uninsured: {
      type: "number",
      required: true …

如下所示,我正在使用该[src]属性.我要做的是预览从设备的相机拍摄的图像.请参阅下面的其他打字稿代码.

<img [src]="lastImage" style="width: 100%" [hidden]="lastImage === null">
<button ion-button icon-left (click)="presentActionSheet()">
    <ion-icon name="camera"></ion-icon>Select Image
</button>

这是.ts代码

lastImage: string = null;

public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
        title: 'Select Image Source',
        buttons: [
            {
                text: 'Load from Library',
                handler: () => {
                    this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
                }
            },
            {
                text: 'Use Camera',
                handler: () => {
                    this.takePicture(this.camera.PictureSourceType.CAMERA);
                }
            },
            {
                text: 'Cancel',
                role: 'cancel'
            }
        ]
    });

    actionSheet.present();
}

public takePicture(sourceType) {
    // Create options for the Camera Dialog
    var …