Question

我试图允许用户类型继承其他用户类型的属性。工作人员是父对象，数学教授是数学教授将继承职员成员属性的子对象。我该如何实现？谢谢你的帮助。

代码段：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    title: "AddressBookQml"
    property int margin: 11


    GridLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: margin


        GroupBox {
            id: gridBox
            title: "Add address"
            Layout.fillWidth: true
            Layout.fillHeight: true

            GridLayout {
                id: gridLayout
                rows: 5
                columns: 2
                flow: GridLayout.TopToBottom
                anchors.fill: parent

                Label { text: "Name" }
                Label { text: "Street" }
                Label { text: "Number" }
                Label { text: "Notes"}
                Button {
                    text: "Add "
                    onClicked: buttons.addClicked("Name:" + textfield_1.text + "Street:" +
                                                      textfield_2.text + "Number:" +
                                                      textfield_3.text + "Notes:" + textArea_1.text)

                }

                TextField {
                    id: textfield_1
                    Layout.fillWidth: true
                }
                TextField {
                    id: textfield_2
                    Layout.fillWidth: true
                }
                TextField {
                    id: textfield_3
                }
                TextArea {
                    id: textArea_1
                    Layout.rowSpan: 1
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }

            }
        }

        GroupBox {
            id: gridBox2
            Layout.fillWidth: true
            Layout.fillHeight: true

            GridLayout {
                id: gridLayout2
                rows: 5
                flow: GridLayout.TopToBottom
                anchors.fill: parent

                GridLayout {
                    id: gridLayout4
                    rows: 2

                    flow: GridLayout.TopToBottom
                    anchors.fill: parent

                    Label { text: "Addresses" }

                    ListModel {
                        id: model
                        ListElement {
                            name: 'Address 1'

                        }
                        ListElement {
                            name: 'Address 2'
                        }

                    }

                    ScrollView {
                        ListView {
                            id: list
                            anchors.fill: parent
                            model: model


                            Layout.rowSpan: 1
                            Layout.fillHeight: true
                            Layout.fillWidth: true

                            delegate: Component {
                                Item {
                                    width: parent.width
                                    height: 15
                                    Column {
                                        Text { text: name }
                                        //Text { text: 'Number:' + number }
                                    }
                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: list.currentIndex = index
                                    }
                                }
                            }
                            highlight: Rectangle {
                                color: "white"
                                Text {
                                    anchors.centerIn: parent
                                }
                            }
                            focus: true
                            onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
                        }
                    }
                }

                Label { text: "Detalii" }

                TextArea {
                    Layout.rowSpan: 2
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    readOnly: true
                }

                GroupBox {
                    id: gridBox3
                    Layout.fillWidth:  true

                    GridLayout {
                        id: gridLayout3
                        rows: 1
                        flow: GridLayout.LeftToRight
                        Button {
                            text: "ExportSql "
                            onClicked: buttons.exportClicked()
                        }
                        Button {
                            text: "ImportSql "
                            onClicked: buttons.importClicked()
                        }
                    }
                }
            }
        }
    }
}

更新

[注意：我将isTeacher对象重命名为isStaffMember。]

我想如果我只是更改HTML中的代码，我可能不需要继承任何属性。在HTML中，我正在尝试实现它，以便StaffMember只能看到添加和编辑课程的2个选项。但数学教授可以看到整个菜单。它不起作用，当我添加＆amp;＆amp;时，菜单根本不显示WorkService.isMathProfessor（）

app.service( 'WorkService', function( $http ) {
    var user;

this.isStaffMember = function() {
    return user.type ==== 'StaffMember'
}
this.isMathProfessor = function() {
   return user.type === 'MathProfessor'
}
});

Answer 1

这在ES6或TypeScript中更容易实现。在ES5中它看起来像这样，如果您使用Browserify和commonJS模块，您可以轻松地将它们分成单个文件。对于这个例子，我们假设它只在一个文件中。

function Work() {
    this.job = 'drone';
}
Work.prototype.getJob = function() {
    return this.job;
}

app.service('Work', Work);

Teacher.prototype = new Work();
function Teacher() {
    this.job = 'teacher';
}

app.service('Teacher', Teacher);

MathTeacher.prototype = new Teacher(); 
function MathTeacher() {
    this.job = 'mathTeacher';
}

app.service('MathTeacher', MathTeacher);

如果您使用的是ES6或TypeScript，MathTeacher将如下所示：

class MathTeacher extends Teacher {
    job = 'mathTeacher';
}

Answer 2

肯定需要在HTML中进行更改，而不是JavaScript函数。 AngularJS指令（ng-show）需要包含isMathProfessor，我开始计算，但我犯的错误是使用＆amp;＆amp;运算符而不是||运营商。

<li ng-show="WorkService.isStaffMember() || WorkService.isMathProfessor()>

通过此更改，如果是工作人员或数学教授，则前两个选项是可见的。但最后3个选择只适用于数学教授。

如何在AngularJS中实现继承？

2 个答案: