angularjs कोणीय 1.5 घटकों और यूआई-राउटर 1.0: सम्मिलित डोम तत्व के गुण जोड़ें



angular-ui-router angular-material (1)

कोनालर 1.5 में, .component () पेश किया गया था और लगता है अच्छा अभ्यास माना जाता है। मैं वर्तमान में ui-router 1.0 में माइग्रेट कर रहा हूं जो घटकों को (और अनुशंसित) रूटिंग करता है। इसलिए मैंने एक नियंत्रक / टेम्पलेट मार्ग को एक घटक राउटर पर पुनर्परिवर्तित किया जो महान काम करता है: घटक "उदाहरण" को यूआई-व्यू कंटेनर को अपने स्वयं के डोम नोड में इंजेक्ट किया जाता है:

हालांकि, मेरा लेआउट टूटता है (कोणीय सामग्री का उपयोग करके) मैंने जो इस्तेमाल किया है वह बस सीएसएस कक्षाओं की नकल करने और उपयोग करने वाली सामग्री का प्रयोग नोड पर लेआउट के लिए करता है। हालांकि, मैं इसे एक "हैकी" समाधान मानता हूं: यदि कोणीय सामग्री उदाहरण के लिए लेआउट मॉड्यूल को बदलती है तो क्या होगा?

एक बेहतर समाधान "उदाहरण" तत्व में लेआउट विशेषताओं या यहां तक ​​कि एक सीएसएस वर्ग जोड़ने के लिए होगा। लेकिन मैं यह कैसे कर सकता हूँ? क्या यह भी संभव है?

मुझे लगता है कि यह प्रश्न निम्नलिखित से संबंधित है, जहां मैंने विशिष्ट समस्या के लिए एक वैकल्पिक उपाय प्रदान किया था। लेकिन मुझे अधिक सामान्य समाधान में दिलचस्पी है: कोणीय घटक टूटना सामग्री लेआउट का उपयोग करना


मुझे मेरे कोणीय 1.5 प्रोजेक्ट में एक ही समस्या का सामना करना पड़ा जहां मैं कोणीय-राइटर और कोणीय सामग्री घटकों का भी उपयोग करता हूं। एक संभावित समाधान केवल स्ट्रिंग-आधारित बाइंडिंग का उपयोग कर रहा है, जहां आप अपने घटक में दो विशेषताओं बांटें: लेआउट और फ़्लेक्स आप इन दो बाइट विशेषताओं (आमतौर पर ' पंक्ति ' और ' 100 ' रिस्पैसिवेली) के मान दे सकते हैं, जैसा कि आप अपने यूआई-राउटिंग स्टेट को निम्नलिखित तरीके से निर्दिष्ट करते हैं:

var exampleState = {
    name: 'examplestate',
    url: '/',             // change this to your desired path
    component: 'example',
    resolve: {
        layout: function () {
            return 'row'; // you can change this value depending on your UI requirements
        },
        flex: function () {
            return '100'; // you can change this value depending on your UI requirements
        }
    }
};

अपने मॉड्यूल की कॉन्फ़िग पद्धति में, आप अपने उदाहरण को परिभाषित करते हैंस्टेट मानक तरीके से:

$stateProvider.state(exampleState);

अंत में, घटक परिभाषा में, जैसा कि आप अपने बाइंडिंग को परिभाषित करते हैं, आप इन दो विशेषताओं को बद्ध गुणों की सूची में जोड़ते हैं। टाइपस्क्रिप्ट में उदाहरण:

export class ExampleComponent implements ng.IComponentOptions {

    public bindings: any;
    public controller: any;
    public template: string;

    constructor() {
        this.bindings = {
            layout: '@',
            flex: '@'
        };
        this.controller = ExampleComponentController;
        this.template = ExampleViewTemplate;
    }
}

आप अपने घटक को अपने सामान्य मॉड्यूल में जोड़ सकते हैं:

.component('example', new ExampleComponent());

इसके परिणामस्वरूप DOM में निम्न HTML तत्व होंगे (कोयोनर-यू-राउटर द्वारा स्वचालित रूप से बनाया गया):

<example layout="row" flex="100" class="ng-scope ng-isolate-scope layout-row flex-100">

तो इस तरह आपको अपने कोड में किसी भी मैनुअल सीएसएस स्टाइल को सम्मिलित करने की आवश्यकता नहीं है। आप अपने घटक तत्व पर मानक कोणीय सामग्री विशेषताओं का उपयोग कर रहे हैं





angular-material