标签: angular5

我有这个

https://angular-dynamic-component-append.stackblitz.io/

我设法动态附加了一个元素，但它没有被编译。我看到很多教程像这样

但这并不是我真正需要的。他们经常使用标签符号来识别容器。

我需要将一个组件附加到任何可能包含我的自定义指令的元素。

我还需要使用指令的绑定值来控制附加元素上的 [hidden] 属性。

目标

1. 覆盖现有组件的行为：
   • 添加属性以显示/隐藏
   • 添加一个类来自定义外观
2. 减少html编码
   • 无需编写整个组件 <my-comp></mycomp>
   • 不需要知道班级
   • 更改类名时的自动行为
     3. 更改应用指令的元素
   • 最终目标是向 contaner 元素添加一个类

预期来源

<div [myDirective]="myBoolean">
    <p>some content</p>
</div>

预计编译

<div [myDirective]="myBoolean" class="myDirectiveClass1">
    <p>some content</p>
     <someComponent [hidden]="myBoolean" class="myDirectiveClass2"></someComponent>
</div>

有没有办法实现这一目标？

先感谢您

我在使数据标签插件与我的 Angular 5 应用程序中的图表一起正常工作时遇到问题。

除了插件没有创建标签外，图表按预期显示。也没有生成控制台错误，这看起来很奇怪。

我的导入部分看起来像：

import {Chart} from 'chart.js';
import 'chartjs-plugin-datalabels';

我的图表创建部分如下所示：

ngAfterViewInit() {
    this.canvas = document.getElementById(this.chartID);
    this.canvas.height = this.graphHeight;
    this.ctx = this.canvas.getContext('2d');


    this.myChart = new Chart(this.ctx, {
      type: 'horizontalBar',
      data: {
          labels: this.chartLabels,
          datasets: [{
              label: 'Percentage',
              data: this.chartValues,
              borderWidth: 1,
              backgroundColor: '#a32d31',
              datalabels: {
                align: 'end',
                anchor: 'start'
              }
          }]
      },
      options: {
        legend: {
          display: false
        },
        maintainAspectRatio: false,
        plugins: {
          datalabels: {
            color: 'white',
            font: {
              weight: 'bold'
            },
            formatter: Math.round
          }
        }
      }
    }); …

我从服务器获得响应字符串:

<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>

我怎么能直接在我的页面中插入这个html元素,以便我可以查看用户的html表.

我是新的角度下面是我尝试过的东西:

我在我的componentsnet类中创建了一个变量作为htmltable,并试图创建一个如下所示的htmlelemnt

this.htmltable = document.createElement(serverresponse.htmltable)

但它不起作用.

我也尝试过这种方式:

 <div class="dynamically_created_div unique_identifier" #d1></div>
    @ViewChild('d1') d1:ElementRef;
        this.renderer.appendChild(this.d1, serverresponse.htmltable);

但它不起作用.请建议我这样做的正确方法

我正在尝试覆盖角度中的现有组件。

我原来的组件是：

@Component({
  selector: 'app-orginal',
  templateUrl: './orginal.component.html',
  styleUrls: ['./orginal.component.css']
})
export class OrginalComponent implements OnInit {
}

在 app.component.html 中我使用原始组件，如下所示：

<app-orginal></app-orginal>

您想要做的是用模拟组件覆盖原始组件。

这是我的模拟组件：

@Component({
  selector: 'app-mock-of-orginal',
  templateUrl: './mock-of-orginal.component.html',
  styleUrls: ['./mock-of-orginal.component.css']
})
export class MockOfOrginalComponent implements OnInit {
}

与此答案相关/sf/answers/3452939871/我尝试在我的 app.module.ts 中使用此解决方案：

@NgModule({
    declarations: [
        AppComponent,
        OrginalComponent,
        MockOfOrginalComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot([
            {path: 'app-mock-of-orginal', component: MockOfOrginalComponent},
            {path: 'app-orginal', redirectTo: 'app-mock-of-orginal', pathMatch: 'full'},
        ]),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

但这不起作用。我做错了什么？

这是我的 git-hub …

我有一个物质输入控件,我在用户输入时限制了特殊字符,但是在任何编辑器中键入一些单词并复制并粘贴具有特殊字符的单词时,这是不起作用的.

我已经编写了指令来防止特殊字符,但可以在复制粘贴中提供更好的解决方案限制.

app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指示:

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        return new RegExp(this.regexStr).test(event.key);
    }

}

演示见这里:

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit

重现步骤:

输入不允许的特殊字符:工作正常.而复制粘贴机智允许特殊字符

我正在尝试zindex使用打字稿设置一个类。但它不起作用。如果您有任何想法，请与我分享。

 ngOnInit() { (<HTMLElement>document.querySelector('.pagemode')).style.z-index = 1;}

我有一个像下面这样的 JavaScript 函数。

window.addEventListener('message', function(event) {
                document.getElementById('mytoken').value = JSON.parse(event.data);

                var token = JSON.parse(event.data);      

                alert('Received message ' + token.message);
                var mytoken = document.getElementById('mytoken');
                mytoken.value = token.message;
                }, false);

我想在 Angular 5 中使用这个脚本，当然，我正在尝试为 Angular 5 找到正确的解决方案。谢谢

假设我有一个带有表的长页面(或者对于包含表的一组容器是正确的)并且这些表中有很多数据,因此它不适合屏幕,因此它是可能的使用滚动条滚动页面.

现在我在表的每一行都有一个复选框,这样我就可以选择一些行并用它们执行一些操作.

这些复选框与状态相关联,因此当我检查其中一个时,状态会更新并重新呈现整个页面.如果我理解正确,这会导致意外的内容滚动(跳跃).

所以我的问题是:是否有任何常见的方法来避免这种意外行为？我正在考虑将用户交互分离到一个单独的状态,但感觉就像是重新发明轮子一样.还有其他想法或标准方法吗？

我遇到一个奇怪的问题，当角度组件变量更改时，我的 HTML 页面没有更新。按下按钮后，我会进行网络加载并开始播放音频，如下所示：

onPreviewPressed(media: Media): void {
    if (this.playing) {
        this.playing = false;
        this.source.stop();
    }

    this.loading = true;

    this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf => {
        this.context.decodeAudioData(abuf, buffer => {
            this.source.buffer = buffer;
            this.playing = true;
            console.info(`Playing is ${this.playing}`);
            this.source.start(0);
        }, y => {
            console.info('Error: ' + y);
        });
        this.loading = false;
    }, () => {
        this.loading = false;
    });
}

然后在我的 HTML 上我有这个片段：

Playing is {{ playing }}
<button [hidden]="!playing" style="width: 44px; height: 44px" (click)="onStopPressed()">
    <img src="/assets/stop.png" alt="Stop">
</button>

当我单击按钮时，音频会正确下载并开始播放，在控制台中我看到它说，Playing …

我知道您可以通过指定特定的组件类型来获取子组件@ContentChildren(SpecificComponent)，但是我可以@ContentChildren(SOMETHING)像通用组件一样使用和获取组件（无论其类型如何）吗？