Angular2 - 组件变量/组件类属性上的双向数据绑定

在Angular2（Beta 6）中，我有一个主菜单的组件。

<mainmenu></mainmenu>

我想绑定宽或窄的布尔值。 所以我把它变成了这个：

<mainmenu [(menuvisible)]="true"></mainmenu>

但是我想要（我认为）是绑定到 javascript 类属性（因为我可能还有其他东西要绑定，但希望通过在组件中使用单个类来保持整洁）。

我收到错误

异常：模板分析错误：属性名称无效 'menumodel.visible' （"

][（menumodel.visible

）]="menumodel.visible">

如果我尝试使用单个变量而不是类进行相同的操作，我会得到：

模板分析错误：

分析器错误：意外的标记"="

但是，这（单向绑定？）似乎确实有效（但我可能想触发菜单从另一个组件变宽/变窄，所以觉得这应该是一个双向数据绑定属性）：

<menu [vis]="true"></menu>

这是我的菜单组件的一部分：

@Component({
    selector: 'menu',
    templateUrl: './app/menu.html',
    providers: [HTTP_PROVIDERS, ApplicationService],
    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm]
})
export class MenuComponent implements OnInit {
    mainmenu: MainMenuVM;
    constructor(private _applicationService: ApplicationService) {
        this.mainmenu = new MainMenuVM();
    }
    // ...ngOnInit, various functions
}

这是我的主菜单视图模型类

export class MainMenuVM {
    public visible: boolean;
    constructor(
    ) { this.visible = true; }
}

我正在尝试创建一个带有图标和文本的菜单，但可以缩小范围以仅显示图标。 我将向上将此事件发送到父组件，以更改菜单旁边容器的位置。 触发内容容器最大化将触发菜单变窄 - 我并不是说这是最好的方法，但我想在深入之前解决这个特定问题。

请注意：我在这里不是数据绑定到输入控件 - 只是数据绑定到组件，以便我可以修改 UI。

这是来自角度备忘单

<my-cmp [(title)]="name">   
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

提前感谢！

更新

从公认的答案中集成代码，并针对我的特定用例进行调整，最终工作代码：

应用.html

...header html content
// This is what I started with
<!--<menu [menuvisible]="true" (menuvisibleChange)="menuvisible=$event"></menu>-->
// This is two way data binding
// 1. Banana-in-a-box is the input parameter
// 2. Banana-in-a-box is also the output parameter name (Angular appends it's usage with Change in code - to follow shortly)
// 3. Banana-in-a-box is the short hand way to declare the commented out code
// 4. First parameter (BIAB) refers to the child component, the second refers the variable it will store the result into.
// 5. If you just need an input use the remmed out code with just the first attribute / value
<menu [(menuvisible)]="menuvisible"></menu>
.. div content start 
<router-outlet></router-outlet>
.. div content end 

app.component.ts （root）

export class AppComponent implements OnInit{
   menuvisible: Boolean;
}

menu.component.ts（根的子级）

export class MenuComponent implements OnInit {
    // Parameters - notice the appending of "Change"
    @Input() menuvisible: boolean;
    @Output() menuvisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
    // Init
    ngOnInit() {
        // Populate menu - fetch application list       
        this.getApplications();
        // Initially we want to show/hide the menu depending on the input parameter
        (this.menuvisible === true) ? this.showMenu() : this.hideMenu();
    }
    //...more code
}

菜单.html

<div id="menu" [ngClass]="menuStateClass" style="position: absolute; top:0px; left: 0px;z-index: 800; height: 100%; color: #fff; background-color: #282d32">
    <div style="margin-top: 35px; padding: 5px 0px 5px 0px;">
        <ul class="menuList" style="overflow-x: hidden;">
            <li>IsMenuVisible:{{menuvisible}}</li>
            <li style="border-bottom: 1px solid #3d4247"><a (click)="toggleMenu()"><i class="fa fa-bars menuIcon" style="color: white; font-size: 16px;"></i></a></li>
            <li *ngFor="#app of applications">
                <a [routerLink]="[app.routerLink]">
                    <i class="menuIcon" [ngClass]="app.icon" [style.color]="app.iconColour" style="color: white;"></i>
                    <span [hidden]="menuStateTextHidden">{{ app.name }}</span>
                </a>
            </li>
        </ul>
    </div>
</div>

请记住导入您需要的内容，例如

导入 {组件， 事件发射器， OnInit， 输入， 输出} "角度2/核心";

强烈推荐这个关于You Tube的视频：角度 2 教程 （2016） - 输入和输出