Question

我正在创建一个有角度的应用程序，并且我有一个组件，其中我使用语义ui添加了一个警报消息，并且忽略该消息我必须编写由语义本身提供的特定信息。我不知道我应该在哪里编写代码才能使其正常工作。

我的HTML代码：

<div class="ui negative message" style="margin: 20px 20% 0 20%;">
    <i class="close icon"></i>
    <div class="header">
        We're sorry we can't apply that discount
    </div>
    <p>That offer has expired</p>
</div>

脚本：

$('.message .close').on('click', function() {
    $(this).closest('.message').transition('fade');
});

Answer 1

我建议使用已经采用的Angular semantic-ui库：https://www.npmjs.com/package/ng2-semantic-ui。它已经包装在Angular中，所以你不必担心jQuery。

Angular不建议通过jQuery或原始JavaScript来操作DOM。它有DOM抽象服务。您可以在此处阅读更多内容：https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

所以即使你将你的jQuery代码包装在Angular中，从最佳实践的角度来看也是不好的。我真的建议使用ng2-semantic-ui。它会节省你的时间。

Answer 2

更好地创建自己的动画过渡。这是如何

在component.ts文件中执行以下操作：

import { trigger, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ]
})
export class App {
  show:boolean = true; //The error message is displayed by default
}

所以现在你有了淡入和淡出的代码。现在，您需要在单击按钮时更改show boolean的值。所以你在component.html

中这样做了

<div class="ui negative message" *ngIf="show" [@enterAnimation] style="margin: 20px 20% 0 20%;">
    <i class="close icon" (click)="show = !show"></i>
    <div class="header">
        We're sorry we can't apply that discount
    </div>
    <p>That offer has expired</p>
</div>

这样您就不必在角度应用程序中使用jquery。

我应该在哪里为角色4编写我的javascript代码

2 个答案: