上下文

Question

上下文

嗨，这个问题来自我上一篇文章的回答：

Angular2 : Error trying to diff 'true' with ngDoCheck()

menuService.service.ts

export class MenuService {
  collapse:boolean;
  collapse$:Subject<boolean> = new Subject();

  toggleMenu() {
    this.collapse = !this.collapse;
    this.collapse$.next(this.collapse);
  }
}

最初的想法是使用属性[collapse]进行菜单折叠。在链接中可用的最后一个问题的建议之后，我确实提供了一个包含菜单状态的布尔属性的服务，其中一个observable / subject在更新时通知。

collapse.animation.ts

export class Collapse {
    @Input() duration: number = 200;             
    @Input() collapse: any;                  
    private _animation: CssAnimationBuilder;

    constructor(animationBuilder: AnimationBuilder, private _element: ElementRef, private service: MenuService) {
        this._animation = animationBuilder.css();

        // Link to service
        this.service.collapse$.subscribe((collapse) => {
            this.updateMenu(collapse);
        });
    }

    updateMenu(collapse: boolean) {

        console.log("-----------------------");
        console.log("service.collapse : " + collapse);
        console.log("animation.collapse : " + this.collapse);
        console.log("-----------------------");

        // collapse from service or this.collapse from input ?
        if (collapse) {   
            this.hide();
        } else {
            this.show();
        }
    }

    ....
}

这个类是我的崩溃css动画，方法有hide（）和show（）。当＆＃34;崩溃＆＃34;属性更新后，链接到属性的html元素将被折叠或不折叠，具体取决于布尔值。

header.component.html

<button type="button" class="header_menu nav_icon root_navitem" id="btn_menu_switch" (click)="toggleMenu()">
    <img class="header_menu" src="css/App_Themes/VAL/48x48/m_bars.png" alt="" />
</button>

....

<div id="left_bar" tabindex="-1" class="left_bar collapse" [collapse]
     (clickOutside)="handleClickOutside( $event.target.className )">
</div>

这是我的某个组件中使用的HTML模板。想法是图像按钮链接到div菜单以折叠：我的菜单包含 [collapse] 属性，该属性与Collapse动画相关联。按钮的 click（）事件会链接到更新属性值的服务。

问题

我的问题是我不了解我的html元素上的collapse属性与我的服务属性之间的关系。正如您在collapse.animation.ts文件中看到的那样，我跟踪崩溃值以查看此代码段中发生的情况。

当我运行应用程序时，菜单的行为完全符合预期，但是当我查看日志时，我看到了：

-----------------------
service.collapse : false
animation.collapse : undefined
-----------------------
-----------------------
service.collapse : true
animation.collapse : undefined
-----------------------
....

这是我不明白的。如果this.collapse未定义，那么我从不需要它，但同时我需要在动画上保留@Input，否则我的Html上定义的[collapse]永远不会被识别。

正如预期的那样，如果我删除 @Input（）collapse：any; ，我会收到以下错误消息：

// EXCEPTION: Template parse errors:
// Can't bind to 'collapse' since it isn't a known native property

那么Angular2如何在服务的崩溃属性和HTML元素的崩溃属性之间建立链接？为什么animation.collapse未定义？

感谢您的任何见解。

Answer 1

事实上，没有任何关系。 collapse参数是观察者在调用其next方法时提供的参数，this.collapse是组件属性。

当调用subscribe方法中设置的回调时，如果您明确地执行此操作，则会更新this.collapse：

updateMenu(collapse: boolean) {
  this.collapse = collapse;
  (...)
}

Angular2：不清楚属性绑定的行为

上下文

问题

1 个答案: