26
4
I want to develop a directive that should has follow functionality:
我想开发一个指令，它应该具有以下功能：
In my current try I use @ContentChild to get the button. Than I added the interface AfterViewInit to the directive. In ngAfterViewInit() I register the click-event on the button with the function toggleMenu. In this function I just toggle the boolean to true or false. To add the css class to the base element I use @HostBinding() with the boolean, that is toggled.
在我当前的尝试中，我使用@ContentChild来获取按钮。然后我将接口AfterViewInit添加到指令中。在ngAfterViewInit()中，我使用函数toggleMenu注册了按钮上的点击事件。在此函数中，我只是将布尔值切换为True或False。要将css类添加到基本元素，我使用@HostBinding()和布尔值，这是切换的。
The problem that I have is, that this doesn't work. The click-event fires and the boolean value changes to, but no css class is added. I don't know why.
我的问题是，这是行不通的。将触发Click-Event，布尔值更改为，但不添加任何css类。我也不知道原因。
This is the code:
代码是这样的：
个人中心
文章发布
退出 export class ToggleSidemenuDirective implements AfterViewInit {
@ContentChild('toggleBtn') element: ElementRef;
private btn: HTMLBodyElement;
ngAfterViewInit(): void {
this.btn = this.element.nativeElement;
this.btn.addEventListener('click', this.toggleMenu);
}
@HostBinding("class.sidemenu-toggled") toggled = true;
private toggleMenu(){
this.toggled = !this.toggled;
console.log(this.toggled)
}
}
Has anyone an idea, why this doesn't work?
有没有人有主意，为什么这不管用？
Do you want to use a directive because you want this code to be reusable? If not I suggest adding this logic to the component.
您希望使用指令，因为您希望此代码可重用吗？如果没有，我建议将此逻辑添加到组件中。
In general try not to use addEventListener with angular. Rather use (click) in a template to do this. To me it's also not clear why you would need a directive here, move this logic to the component. And re-use the component where you need this functionality. Store the toggle status in service so it can be re-used in multiple components.
一般来说，尽量不要使用带有角度的addEventListener。而是在模板中使用(单击)来执行此操作。对我来说，也不清楚为什么这里需要一个指令，将这个逻辑移到组件中。并在需要此功能的地方重新使用该组件。将切换状态存储在服务中，以便可以在多个组件中重复使用。
I've just learned what directives are and what kind of directives exist. Now I want to use them to implement functionality like this. I decided to use a directive in this case, because I only must use this directive to add this functionality that is usually added via a component and EventBinding. To do it in a directive is much less work and you have all the code only in one place. When are you suggest to use structural directives?
我刚刚了解了什么是指令，以及存在什么样的指令。现在我想用它们来实现这样的功能。在本例中，我决定使用指令，因为我只需要使用该指令来添加通常通过组件和EventBinding添加的功能。在指令中执行此操作所需的工作量要少得多，而且您只需将所有代码放在一个位置。你建议什么时候使用结构性指令？
ContentChild only gets the "first", you should use ContentChildren and get the last
ContentChild只获取“First”，您应该使用ContentChild并获取最后一个
//it's a QueryList
@ContentChildren('toggleBtn') elements: QueryList<ElementRef>;
private btn: HTMLBodyElement;
ngAfterViewInit(): void {
//You get the last element of the queryList using last
this.btn = this.elements.last.nativeElement;
this.btn.addEventListener('click', this.toggleMenu);
}
0
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。 文档 here似乎表明这是 .l
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。 所以，告诉我: What a
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。 我该怎么做？是否有类似 .on
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。 本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
function show1(){ $("#btn").click(show2()); window.alert(
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。 基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function
我是一名优秀的程序员,十分优秀！