标签: angular8

我有一个自定义组件<app-button><span></span></app-button>。

它具有 CSS 样式，例如：

span:hover {
   color: red;
}

当我在另一个组件中使用此组件并尝试在父组件中应用 CSS 样式时，它没有效果：

<app>
<app-button></app-button>
</app>

app我尝试过的内部组件：

  app-button span:hover {
       color: green;
    }

它对我不起作用

将子组件表单放入父组件表单的最佳方法是什么？我们使用的是 2019 年最新的 Angular 8。经过研究，以下方法不能完全奏效。

父组件：

 ngOnInit() {
    this.parentForm = this.fb.group({
       childForm1: etc
    })

子组件：

this.ChildForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetType': [null, [Validators.maxLength(8)]],
  'city': [null, [Validators.maxLength(32)]],
  'state': [null, [Validators.maxLength(16)]],
  'postalCode': [null, [Validators.maxLength(16)]],
}, { validator: atLeastOneLocationRequired })

}

方法一：

这个方法，https: //itnext.io/partial-reactive-form-with-angular-components-443ca06d8419 经过严格测试表明 ParentForm 有效，即使 Child Form 无效。这不应该发生。

ngOnInit() {
  this.parent = this.fb.group({
    fullName: null
  })

}

formInitialized(name: string, form: FormGroup) {
  this.checkoutForm.setControl(name, form);
}

方法二：

方法 2 使用 ViewChild，这是听力不好的做法。 https://davembush.github.io/attaching-an-angular-child-component-s-form-to-a-parent/

@ViewChild(ChildComponent) childComponent: ChildComponent;

And now in ngAfterViewInit() …

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

正如您在上面看到的，我们为日期输入即picker1 和picker 提供了唯一的ID。问题仍然存在“MatDatepicker 只能与单个输入相关联。” 不知从何而来。我需要帮助。我在谷歌和stackover上搜索过，但没有帮助

我在 angular8 工作并面临一个问题，

为了动态加载我的样式，我使用了波纹管代码并且它运行良好，但是当我将包更新"@angular-deficit/build-angular": "^0. 800.0"为 时"@angular-deficit/build-angular": "^0. 803.21"，它停止工作。该应用程序运行良好，终端和浏览器控制台中没有错误，但应用程序上未实现样式。

declare function require(name: string): any;
 ngOnInit() {
    require('style-loader!./file-path');
}

包.json

{
"name": "latest-frontend-theme",
"version": "0.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": …

我对 angular/ionic 很陌生，我正在尝试创建一个带有默认选中复选框的表单。

它尝试了两个

checked

和

checked="true"

但两者都不起作用。奇怪的是，属性“禁用”工作得很好。

这是我的 html：

checked

这是它的样子：

我在装有最新 Safari 浏览器的 MacBook Pro 上使用 angular8 和 ionic4。有任何想法吗？

我正在尝试将 CKEDITOR 5 集成到我的 Angular 8 项目中。我已经使用其他插件以及 ClassicEditor 和 InlineEditor 创建了自定义超级构建（使用本指南：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-建立）。

我已经导入CKEditorModule到我的共享模块文件中。下面是我的组件文件：

import { Component, OnInit } from '@angular/core';
import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';

@Component({
    templateUrl: './cke5.html',
    styleUrls: ['./cke5.scss'],
    selector: 'app-cke5'
})
export class CKE5  {

    loader: any;

    public CEditor = CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
        extraPlugins: [ this.imageUploadAdapterPlugin ],
    } )
    .catch( error => {
        console.log( error );
    } );

    constructor() {
        console.log(CKEDITOR.ClassicEditor);
    }

    uploadImage() {
        return this.loader.file
            .then( file => new …

我在我的 angular 应用程序中使用 bootstrap 4，下拉功能在模式开发人员中完美运行，但在生产模式下，我收到此错误：

未捕获的错误：DROPDOWN：选项“popperConfig”提供了类型“window”但预期类型为“(null|object)”。
在 Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
at et_getConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在新 e (vendors.e5434761d9d5f5d91054.bundle.js:1)
at HTML5434761dbundle.js : HTML5Button (vendors.e5434761d9d5f5d91054.bundle.js:1)

这是我在我的应用程序中使用的代码

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" 
    id="dropdown-search" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">

    Fiches consultées
  </button>

  <div class="dropdown-menu dropdown-filter filter-menu" 
    aria-labelledby="dropdown-search">

    <div *ngFor="let h of historiques" class="form-check">

      <input class="form-check-input" id="{{h.name}}" type="checkbox"
        value="{{h.name}}" [(ngModel)]="h.selected" 
        (change)="getSelected()">

      <label class="form-check-label" for="{{h.name}}">
        {{h.code}}
      </label>
    </div>
  </div>
</div> 

我有一个基本的角度应用程序，它运行良好。在ng serve和ng test命令都工作正常。最近，作为针对不同环境构建自动化的一部分，我引入了一些配置更改以允许environment.ts根据环境加载不同的文件。对于我编辑的angular.jsonfile.After的变化，ng serve并ng test命令无法执行。每当执行命令时，都会抛出以下错误：

An unhandled exception occurred: No projects support the 'test' target.
See "C:\Users\account\AppData\Local\Temp\ng-BlbvgV\angular-errors.log" for further details.

修改angular.json为：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "applicationui": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../applicationservice/src/main/resources/static",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets" …

我用法语构建了一个 angular 应用程序，所以现在我想使用国际化 (i18n) 以其他语言（如 En）提供它，所以问题是 Angular 的默认语言环境是 En-es，当我写这个时<span i18n>Mes endroits</span>，我有这个

<file source-language= "en-US" datatype="plaintext" original="ng2.template">// source is English
    <body>
      <trans-unit id="4df6e2173dc9d9f8c60481273cf3371981e60fde" datatype="html">
        <source>Mes endroits</source> ... // but this is in french

我希望源语言为fr并提供例如messages.en.xlf

所以我可以将默认语言环境更改为 fr ，或者我必须用英语重写我的代码并提供 messages.fr.xlf

我有获取用户输入的字段，根据它，下面的元素将显示已写入的内容

 <label>message</label>
 <input type="text" name="name" [(ngModel)]="person.message"class="form-control">

 <label class="label">you've written this </label>
 <input type="text" name="name" disabled value="{{message}}" class="form-control">

这段代码工作正常，但我想为显示的值分配一个条件，如下所示： *ngIf=person.message!=null?{{message}}":'write'

这意味着如果输入字段不为空，则显示写入的内容，否则显示单词 write