标签: angular7

我在控制台中看到 ngmodel 已被弃用，并将在 angular 7 上删除。我有一个指令使用它来进行双向数据绑定，我如何才能做到这一点[(ngmodel)]？

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[onlyFloat]'
})
export class OnlyFloatDirective {

    private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);

    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', '-' ];

    constructor(private el: ElementRef) {
    }
    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        let current: string = this.el.nativeElement.value;
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }

}

HTML：

<div class="ui-g-12 …

如果我从类递归调用方法，是否可以在单独的文件中创建树/递归对象并避免Circular dependency detected使用Angular CLI发出警告？

（在 angular 7 中测试）我知道这是依赖注入（文章）中的一个问题，但是作为构造函数用于来自外部 api 的数据或用于内部目的的对象呢？如果无论如何这都不是一个好主意，你如何解决它？（我想这个“子问题”的答案是模型的变化，那么我应该如何修改我的模型？）我寻找解决方案，但最接近的问题并没有帮助我将相同的方法应用于我的情况。

我有Emails和Attachments（带有附件的电子邮件 - 带有附件的整个电子邮件Email也可以是附件，Attachment是具有属性的分隔对象，内容可以是File或Email，但在这里，为简单起见，假设附件始终为 1Email或 null）。
每个类都有用于从 JSON 对象创建实例的静态方法（我从 API 获取 JSON，然后我将通过调用fromJson顶级对象上的静态方法来创建表示 API 值的对象实例）：

文件：app/model/email.ts（部分代码）

import { Attachment } from './attachment';

export class Email {
  // some attributes
  public attachment?: Attachment;

  public static fromJson(js: JSON): Email {
    const e = new Email(); …

我正在研究 Angular Elements 并考虑将我们的 Angular 组件生成为 Angular Elements，以便可以在 Angular 应用程序之外使用。

假设我有一个 Angular 4 应用程序，它导入两个不同的 Angular Elements（内置于 Angular 7）并将它们呈现在同一页面上，然后我在我的 Angular 4 组件中实例化一个服务。该服务包含我想传递到我的 Angular Elements 中的数据，因为 Web 组件只接受字符串作为属性（输入），有没有什么好的方法可以在服务实例之间共享数据/将服务实例传递到 Angular Elements 中？

如果模板中没有引用 ViewChild，是否可以将其标记为私有？

我已经能够做到这一点，然后使用“--prod”标志构建和提供服务，并且没有遇到任何错误。我目前正在使用 Angular 7。

@ViewChild(HelloComponent) private helloComponent;

这是我正在谈论的堆栈闪电战：https ://stackblitz.com/edit/angular-vxbpuk?file=src%2Fapp%2Fapp.component.ts

我想我有使用 aot 的 stackblitz，但你可以在本地验证同样的事情。

编辑：我很抱歉之前没有提出这个问题，但是角度文档中的这个模糊让我停下来：

https://angular.io/guide/aot-compiler#phase-2-code-generation

装饰组件类成员必须是公共的。您不能将 @Input() 属性设为私有或内部。

但正如@GCSDC 在下面已经指出的那样，Angular 团队似乎在他们的示例中使用了私有成员：https ://angular.io/guide/component-interaction#parent-calls-an-viewchild

我在项目文件夹中并在控制台中执行以下语句：

ng serve --configuration=de

执行因错误而中断：

ERROR in xliff parse errors: Message ... misses a translation

翻译是可用的。问题是什么？

您可以通过从我的存储库Bitbucket Repository 中检出应用程序来重现它并运行。

先感谢您。

我无法将路由参数检索为空。我正在使用 angular7。请找到下面的代码

HeaderComponent ts 文件

    import {Router, ActivatedRoute} from '@angular/router';
    constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
             this.getNewsSelectedFromRouteParam();
        }
    getNewsSelectedFromRouteParam() {
            alert();
            let id = this.activatedRoute.snapshot.paramMap.get('typeId');
            alert(id);
        }
getNewsByCountry(newsTypeSelected: any) {
        this.router.navigate(['/news',newsTypeSelected]);
        this.getNewsSelectedFromRouteParam();
    }

标题html

<div class=" dropdown-toggle" data-toggle="dropdown">
                XXX
            </div>
            <div class="dropdown-menu">
                <div *ngFor="let cr of country" class="dropdown-item"
                    (click)="getNewsByCountry(cr.value)" >{{cr.name}}</div>
            </div>

应用路由ts文件

 const routes: Routes = [
        { path: 'news/:typeId', component: XxxComponent },
    { path: '**', component: XxxComponent }
    ];

从新选项卡访问我的网站时，我总是在 chrome 上收到此消息：

无法加载资源：net::ERR_CACHE_WRITE_FAILURE

发生这种情况时，没有加载任何内容并且页面是空白的。使用检查器，我可以看到 app-main 是空的。

当我按 f5 时，网站加载良好。失败的总是选项卡上的第一个加载。

我以前从来没有遇到过这个问题，这是新的。

我使用快递作为服务器。

我使用角 7.2.7

"@angular/animations": "7.2.7",
"@angular/cdk": "^7.3.3",
"@angular/common": "7.2.7",
"@angular/compiler": "7.2.7",
"@angular/core": "7.2.7",
"@angular/forms": "7.2.7",
"@angular/http": "7.2.7",
"@angular/platform-browser": "7.2.7",
"@angular/platform-browser-dynamic": "7.2.7",
"@angular/router": "7.2.7",
"core-js": "2.6.5",
"rxjs": "6.4.0",
"typescript": "3.1.6",
"zone.js": "0.8.29",
"@angular-devkit/build-angular": "0.13.4",
"@angular/cli": "7.3.4",
"@angular/compiler-cli": "7.2.7",
"@types/core-js": "2.5.0",
"@types/node": "11.10.4",
"codelyzer": "4.5.0",
"concurrently": "4.1.0",
"webpack": "4.29.6",

我应该调查的任何线索？

主要负责人：

我刚刚删除了我的 cookie，现在它运行良好。当我连接并再次获得 cookie 时，我会重现默认值。所以它与cookie系统有关。

我正在尝试在云 Firestore 数据库中插入表单数据。下面是我的 x.component.ts 文件，我在其中编写的构造函数出错

private firestore: AngularFireStore

    import { Component, OnInit } from '@angular/core';
    import { GroupService } from '../shared/group.service';
    import { NgForm } from '@angular/forms';
    // import { NullTemplateVisitor } from '@angular/compiler';
    import { AngularFirestore } from '@angular/fire/firestore';
    // import { AngularFireModule } from 'angularfire2';
    // import { AngularFirestoreModule } from 'angularfire2/firestore';
    
    @Component({
      selector: 'app-group',
      templateUrl: './group.component.html',
      styleUrls: ['./group.component.css']
    })
    export class GroupComponent implements OnInit {
    
      constructor(private groupService: GroupService, private firestore: AngularFirestore) { }
    
      ngOnInit() {
        this.resetForm();
      } …

<ul class="list">
  <cdk-virtual-scroll-viewport  style="height: 500px" itemSize="90" >
      <div *ngFor="let n of numbers" style="height:130px;">{{n}}</div>
  </cdk-virtual-scroll-viewport>
</ul>

<!--app.module.ts-->

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ ScrollingModule ]
})

<!--app.component.ts-->

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }
}

一切都很好，但它显示“=====>无法绑定到 'cdkVirtualForOf'，因为它不是 'div' 的已知属性。<===== 错误

我的输入看起来像这样：我只想使用输入掩码但不强制用户严格填充掩码中的模式。

<input type="text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode">

似乎根据文档[validation]=true 默认情况下。但应该是某种方式将验证更改为false。当我这样做时

<input type="text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode" [validation]="true">

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'validation' since it isn't a known property of 'input'. ("text" class="Enter Zipcode" placeholder="Enter Zipcode" mask="00000-0000" formControlName="zipcode" [ERROR ->][validation]="false">

Angular 抛出模板解析错误？