禁用Angular 2 html模板中的波浪绿线（angular按钮禁用）

25-02-26 16

如果您对禁用Angular2html模板中的波浪绿线和angular按钮禁用感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解禁用Angular2html模板中的波浪绿线的各种细节，并对angul

如果您对禁用Angular 2 html模板中的波浪绿线和angular按钮禁用感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解禁用Angular 2 html模板中的波浪绿线的各种细节，并对angular按钮禁用进行深入的分析，此外还有关于Angular 2 * ng如果没有更新HTML模板、Angular 2 Web Pack 404 Html模板URL、angular 2包括html模板、Angular async pipe 在 Component html 模板中的一个实际应用的实用技巧。

本文目录一览：

禁用Angular 2 html模板中的波浪绿线（angular按钮禁用）
Angular 2 * ng如果没有更新HTML模板
Angular 2 Web Pack 404 Html模板URL
angular 2包括html模板
Angular async pipe 在 Component html 模板中的一个实际应用

禁用Angular 2 html模板中的波浪绿线（angular按钮禁用）

当我在不更改模板本身的情况下编辑Angular 2> = v2(v2或更高版本)项目的html模板时,如何摆脱以下波浪形的绿线：
可以说我有以下几行：

<textarea [(ngModel)]="jobDescription"  cols="40" rows="5" (ngModelChange)="textAreaEmpty()"></textarea>
         <br/>

Visual Studio Code(1.11.1)编辑器中的上一行如下所示

注意绿色波浪线？如果我将鼠标悬停在它上面,我会看到以下提示：

建议：“[[(ngModel)]]的属性名称必须小写.我想忽略这个建议.如何在不关闭整个编辑器建议的情况下实现这一点？

我对其他潜在的编辑建议很满意,但对于这个特别的建议,我想关闭这个绿色警报.

更新1：
我的工作区设置现在如下所示

{
    "files.exclude": {
        "**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/*.js.map": true,"**/.DS_Store": true,"**/*.js": { "when": "$(basename).ts"}
    },"window.zoomLevel": 0,"html.suggest.angular1": false
}

更新2：即使添加“html.suggest.angular1”：false也没有禁用这些警告,我仍然在我的编辑器中看到它们：

注意：我安装了以下扩展：

> VS代码的Angular TypeScript代码片段
> angular2-inline
> Azure功能工具 – VS代码的扩展
> VS Code – 适用于Chrome的调试器
> VS Code ESLint扩展
> Git历史(包括git log)
> Visual Studio代码HTML片段
> vscode-htmlhint
>用于CSS类名的IntelliSense
>最新的TypeScript和Javascript Grammer
> Visual Studio团队服务扩展
> Visual Studio代码的Visual Studio Team Services状态扩展

最后更新：

就我而言,HTMLHint是罪魁祸首.我禁用了扩展并重新加载了工作空间,现在我看不到任何更加波浪形的绿线.

解决方法

转到文件 – >偏好 – >设置

打开html窗格并检查以下行：

// Configures if the built-in HTML language support suggests Angular V1 tags and properties.
  "html.suggest.angular1": true,

它应该是假的.

Angular 2 * ng如果没有更新HTML模板

为什么* ngIf没有更新模板？无论isVisible在2秒后变为false,都会显示标题hello.

@Component({
  selector: 'my-app',template: `
    <h1 *ngIf="isVisible == true">{{title}}</h1>
  `
})
export class AppComponent {
  title = 'Hello!';
  isVisible = true;

  constructor() {
    setTimeout(function() {
            this.isVisible = false;
            console.log(this.isVisible);
    },2000);
  }
}

解决方法

有这样的匿名功能

setTimeout(function() {
   this.isVisible = false;
},2000);

执行上下文(this)指向全局对象(窗口),但是您希望它是AppComponent实例.在这种情况下,您最好使用保留词法范围的arrow function：

constructor() {
  setTimeout(() => {
     this.isVisible = false;
  },2000);
}

您可以使用其他方法,例如使用Function.prototype.bind绑定上下文和保存上下文引用,但在这种情况下,箭头函数是最方便的.

Angular 2 Web Pack 404 Html模板URL

我正在使用Angular2 RC4版本和webpack dev服务器.我无法成功加载我的应用程序.在浏览器控制台上,它会抛出404并且无法使用webpack加载AppComponent模板文件.如果我使用lite-server,这是有效的

app.component.ts片段

@Component({
    moduleId:module.id,selector: 'body',templateUrl: 'app.component.html',})

webpack.config.js片段

module:{
       loaders:[
            {test:/\.ts$/,loader:'ts',exclude: /node_modules/},{test:/\.html$/,loader:'html' },],},

错误
browser_adapter.js？0526：84错误：未捕获(在承诺中)：无法加载/app.component.html

解决方法

在Angular2 webpack的情况下,

使用这样的模板 –

template: require('./app.component.html'),styles: [require('./app.component.css')]

代替

templateUrl: './app.component.html',styleUrls: ['./app.component.css']

看看这是否有帮助.

angular 2包括html模板

在角度2我需要创建一个带有冗余部分的大型html模板.
因此,我想创建多个html模板,并将它们包含在主html文件中(如angular1中的ng-include)

但是如何在主模板中包含子模板？

例：

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

–

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

–

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>

您可以创建sub1 sub2等组件.在这些子组件上添加这些html文件作为模板.

在主html上分别调用组件选择器.它会工作

Angular async pipe 在 Component html 模板中的一个实际应用

SAP Spartacus UI 开发的 guideline：

UI components bind to observable data from the back end, using the standard Angular async pipe.

UI Component 绑定到从后台返回的 Observable 数据.

看个例子：

<cx-carousel
  [items]="items$ | async"
  [title]="title$ | async"
  [template]="carouselItem"
  itemWidth="285px"
>
</cx-carousel>

title$ 是消费 cx-carousel 的 Component 传入的 Observable 对象。

this.componentData$ 是从 Commerce Cloud 后台返回的原始数据，但是 UI 展示只对 title 感兴趣，所以调用 map operator 进行数据映射。

title 的数据源， c o m p o n e n t D a t a 的数据源，componentData 的数据源，componentData, 也是一个 Observable，来自 ComponentData.data$ 调用 pipe 执行 filter 操作后的结果：

运行时 title$ 的值通过 async pipe 取出：

operator 里能看到 map 操作：

这个 Observable 是通过另一个 Observable 执行 filter 操作得到的：

这个 source 指向的 Observable 就是 componentData.data$:

async pipe 的实现类是 AsyncPipe，实现了 PipeTransform 接口的 transform 方法：

transform 方法里执行 subscribe, 触发 Observable 的执行：

要获取更多 Jerry 的原创文章，请关注公众号 "汪子熙":

本文同步分享在博客 “汪子熙”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与 “OSC 源创计划”，欢迎正在阅读的你也加入，一起分享。

今天的关于禁用Angular 2 html模板中的波浪绿线和angular按钮禁用的分享已经结束，谢谢您的关注，如果想了解更多关于Angular 2 * ng如果没有更新HTML模板、Angular 2 Web Pack 404 Html模板URL、angular 2包括html模板、Angular async pipe 在 Component html 模板中的一个实际应用的相关知识，请在本站进行查询。

本文标签：