标签: angular7

我试图在我的 app.module 文件中设置一个配置设置，以便它根据我是否在生产中而有所不同。

我的environment.ts文件有

export const environment = {
  production: false
};

我的environment.prod.ts文件有

export const environment = {
  production: true
};

在我的app.module.ts文件中我正在尝试这样的事情

imports: [
    BrowserModule,
    AppRoutingModule,
    LoggerModule.forRoot({
      level: (environment.production ? NgxLoggerLevel.OFF : NgxLoggerLevel.DEBUG)
    }),
...

当我console.log(environment.production)在任何地方执行操作时，它都会告诉我这个值false在我处于开发环境中时应该是这样的。

我的问题是它的行为似乎与true我的 app.module 文件中一样。在这种情况下，我尝试将日志语句设置为在生产环境中禁用，但它们也在开发和生产中被禁用。（如果我翻转条件语句，那么它们就会在开发和生产中启用）。因此，就好像它读取的环境.生产是真实的，而它不应该是真实的。

能否在 app.module 中像这样使用environment.product变量，或者我在这里遗漏了其他内容吗？

我有一个按钮可以打开我的材质对话框。在打开的对话框中，后台页面滚动到顶部。关闭对话框时，页面滚动回原始位置。

谁可以阻止这个滚动？

const dialogRef = this.dialog.open(dialogComponent, {
            panelClass: config.panelClass,
            width: 1100px,
            height: 800px,
            closeOnNavigation: true,
            maxHeight: '95%',
            maxWidth: '95%',
            data: {
                someData...
            },
        });

我的网页

<div class="dialog dialog__content">
    <div>
        <div *ngIf="title" class="dialog__header">
            <h1 mat-dialog-title>{{title | translate}}</h1>
        </div>
        <div class="dialog__closing">
            <button matDialogClose>
                <i class="fal fa-times-circle"></i>
            </button>
        </div>
    </div>
    <mat-dialog-content>
        ...some content...
    </mat-dialog-content>

    <mat-dialog-actions *ngIf="buttons && buttons.length > 0">
        <div class="buttons">
            <button>...</button>
        </div>
    </mat-dialog-actions>
</div>

我有一个简单的 Angular7 应用程序，它只有两条路线，主要是“文章”。如果你在本地测试它，它会起作用，但是当你放到 github 页面上时，它只会加载页面的 css。我按照文档中的角度文档进行了部署，并且还尝试了 gh-pages 工具。但它们都不起作用。如果我删除我的路线它就会起作用。

这是我在控制台上遇到的错误。

1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'blogfolio'
Error: Cannot match any routes. URL Segment: 'blogfolio'
    at t.noMatchError (main.5443131190bc79920d7b.js:1)
    at e.selector (main.5443131190bc79920d7b.js:1)
  ............

rodnorm.github.io/:1 Failed to load resource: the server responded with a status of 404 () 

这是我的代码：

应用程序.routing.ts

import { MainComponent } from './main/main.component';
import { ArticleComponent } from './article/article.component';    
import { Routes } from "@angular/router";

export const routes: Routes = [ …

这是我的package.json文件：

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

service.ts文件代码如下：

import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
//import { Observable } from 'rxjs/Observable';
//import   'rxjs/add/observable';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EmpService {
  employees=[];
  constructor(private _http: Http) { }
  addEmployee(info){
    return this._http.post("http://localhost/data/insert.php",info)
      .map(()=>""); …

我使用 ngx-cookie-service 来存储我的令牌，但是当我单击断开连接时，每次都不会删除 cookie。有时它的工作，但有时它不。

有时我只需要重新加载页面以确保删除 cookie，有时它工作正常但它不会将我重定向到登录页面。我在本地主机和构建相同的东西中对其进行了测试。对于浏览器，我使用 chrome

要设置我的令牌，我使用这个：

 setAuth(value, expireTime): void {
this.cookieService.set('id_token', value, expireTime, '../');

}

我正在使用以下代码删除 cookie：

clearCookies(){this.cookieService.deleteAll('../');}

这是我的注销功能：

  logOut() {
let path = location.pathname;
if (path.indexOf('/panier') > -1 || path.indexOf('/store') > -1) {
  this.setLogout({ value: true });
} else {
  this.disconnect().subscribe(res => {
    if (res.status == 'success') {
      this.setLogout({ value: false })
      this.clearCookies();
      this.router.navigate(['/login'])
    }
  })
}

}

我已经在我的 Windows 机器上全局安装了 Angular 7.2.0。路径是C:\Users\me\AppData\Roaming\npm\node_modules\@angular\cli，我需要运行像 Angular 6.0.0这样的旧项目。那么我是否需要在我的机器上安装这两个版本才能运行该项目？

目标是使 angular mat-table 的排序箭头始终可见（例如，它们的不透明度始终设置为 0.54）。

我尝试在我的.css文件中为这个组件添加一些 css 代码。它使所有箭头都可见（我将不透明度设置为 0.54），但在这种情况下，即使单击了箭头，所有箭头也始终保持此不透明度（通常，如果单击箭头，不透明度将设置为 1）。

我添加到我的.css文件中的代码：

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

我希望箭头始终以不透明度 0.54 显示。箭头的其余行为应保持不变。在列未排序的情况下，例如，箭头处于未定义状态，箭头应为向上箭头且不透明度为 0.54。如果我点击箭头，它的不透明度应该设置为 1。如果我取消排序，箭头应该再次具有 0.54 的不透明度。

这里有一个例子：https : //stackblitz.com/edit/angular-isxoc5。所有箭头都显示为我想要的。但是如果你点击一个箭头，它的不透明度仍然是 0.54，而不是 1。

this.db.object('/users/'+user.uid).update({
  name:user.displayName,email:user.email
  });
}

收到此错误：

core.js:9110 ERROR TypeError: Class constructor Observable cannot be invoked without 'new'
     at new FirebaseObjectObservable (firebase_object_observable.js:16)
     at FirebaseObjectFactory (firebase_object_factory.js:7)
     at AngularFireDatabase.push../node_modules/angularfire2/database/database.js.AngularFireDatabase.object (database.js:18)
     at UserService.save (user.service.ts:20)
     at SafeSubscriber._next (app.component.ts:23)
     at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
     at SafeSubscriber.next (Subscriber.js:124)
     at Subscriber._next (Subscriber.js:72)
     at Subscriber.next (Subscriber.js:49)
     at Notification.observe (Notification.js:20)
 defaultErrorLogger @ core.js:9110

Run Code Online (Sandbox Code Playgroud)

我有一个 mat-select 与该multiple选项一起使用（请参阅文档中的此示例）。
我想设置复选框被选中时的颜色样式（默认情况下为蓝色）。
所以从这个：

我需要得到这个：

但我不知道我应该使用哪个 css 选择器/规则。
通常对于复选框，我会使用这个：

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #A5C73C;
}

但选项不被视为复选框。

HTML :

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

我正在尝试使用 angular 中的正则表达式来验证电话号码

HTML 内容

<div class="form-group row">
                <input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                    [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors && mobileNumberform.submitted) }"
                    formControlName="inputCountryCode">
                <div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid && (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                    class="invalid-feedback">
                    <div *ngIf="f.inputCountryCode.errors.required">This field is required.</div>
                    <div *ngIf="f.inputCountryCode.errors.pattern">Invalid phone number.</div>
                </div>
            </div>

TS代码

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
    });

验证模式应该允许带空格的数字，因为我使用的是电话号码屏蔽，它在 3 位数字后添加了空格。

该模式不起作用，不断让电话号码验证为假

Angular 4 手机号码验证

允许数字和空格的字段的正则表达式

屏蔽指令

export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false); …