क्या कोणीय 2 में कोई तरीका है कि टेम्पलेट का चयन डिवाइस

Question

पर आधारित है, मैं कोणीय 2 में विचारों के लिए 1 प्रति डिवाइस टेम्पलेट रखना चाहता हूं और कुछ विचारों के लिए सभी उपकरणों के लिए 1 हो सकता है। क्या ब्राउज़र उपयोगकर्ता-एजेंट

Answer 1

पर आधारित कोणीय 2 में यह संभव है कि योजनाएं हैं लेकिन अभी तक यह तय नहीं किया जा सकता है कि यह वास्तव में लागू किया जाएगा।
वर्तमान में आप मीडिया प्रश्नों का उपयोग कर सकते हैं और उदाहरण के लिए ngSwitch डिवाइस या स्क्रीन आयामों के आधार पर दृश्य के विभिन्न हिस्सों को दिखाने के लिए।

भी

• https://github.com/angular/angular/issues/6328
• https://github.com/angular/angular/issues/1239
• https://github.com/angular/angular/pull/4566

Answer 2

देखें आप इस के लिए मीडिया के प्रश्नों के साथ सीएसएस @imports इस्तेमाल कर सकते हैं।

आपको बस इतना करना है कि प्रत्येक डिवाइस के लिए एक अलग सीएसएस फ़ाइल बनाएं और फिर इसे अपनी टेम्पलेट शैली में आयात करें।

उदाहरण:

Angular2 घटक:

@Component({ 
    selector: 'my-comp', 
    template: `...`, 
    styleUrls: ['./style.css'] 
}) 

style.css में:

@import url("device1.css") screen and (min-width: 300px); 
@import url("device2.css") screen and (min-width: 800px); 

और फिर device1.css और device2.css में उपकरण-विशिष्ट शैलियों।

सीएसएस @ आयातों के विवरण के लिए https://developer.mozilla.org/en/docs/Web/CSS/@import देखें।

Answer 3

एक वैकल्पिक यह angular/flex-layout पैकेज उपयोग कर रहा है

fxHide API और fxShow API

उदाहरण

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div> 

साथ सक्रिय ब्रेकपाइंट है:

• xl, फिर डिफ़ॉल्ट fxShow पर फ़ॉलबैक; इसलिए div
• lg दिखाया गया है, तो div छिपा हुआ है (के बाद से मूल्य === 'सही')
• md, तो डिफ़ॉल्ट fxShow पर वापस आने, तो div
• sm दिखाया गया है, तो वापस आने डिफ़ॉल्ट fxShow करने के लिए; इसलिए div
• xs दिखाया गया है, तो div दिखाया गया है (के बाद से मूल्य === 'असत्य')

यह breackpoint

साथ सूची है या ObservableMedia

उदाहरण

का उपयोग कर

import {MediaChange, ObservableMedia} from "@angular/flex-layout"; 

const PRINT_MOBILE = 'print and (max-width: 600px)'; 

@Component({ 
    selector : 'responsive-component', 
    template: ` 
     <div class="ad-content" *ngIf="media.isActive('xs')"> 
     Only shown if on mobile viewport sizes 
     </div> 
    ` 
}) 
export class MyDemo implements OnInit { 
    constructor(public media: ObservableMedia) { } 

    ngOnInit() { 
    if (this.media.isActive('xs') && !this.media.isActive(PRINT_MOBILE)) { 
     this.loadMobileContent(); 
    } 
    } 

    loadMobileContent() { /* .... */ } 
} 

• प्रिंट और (max-width: 600px) मोबाइल व्यूपोर्ट आकारों के साथ मुद्रण के लिए एक mediaQuery है।
• xs मोबाइल व्यूपोर्ट आकारों के लिए मीडियाQuery से जुड़ा एक उपनाम है।