लोडर में आयनिक 2 कस्टम एसवीजी स्पिनर

Question

मैं लोडिंग बनाने के लिए अपना एसवीजी जोड़ने की कोशिश कर रहा हूं लेकिन जब मैं इसे देखने के लिए जाता हूं तो मुझे लगता है कि यह एक खाली टैग है जहां यह होना चाहिए।

let loading = this.loadingCtrl.create({spinner: ' ', 
      content: this.appConfig.customSpinner }) 

ऊपर मेरा निर्माण कोड है और यह चर एसवीजी के लिए नीचे एचटीई कोड है।

<svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2419 1188.4"> 
    <defs> 
    <mask id="mask"> 
     <path fill="#000" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/> 

    <path fill="#000" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/> 
    <path fill="#000" d="M581.4 718h206v131.1h-206z"/> 

    <circle fill="#fff" cx="0" cy="1450" r="551.3"/> 
    </mask> 
    </defs> 
    <style> 
    .st2{fill:none;stroke-width:40;stroke-miterlimit:10;} 
    </style> 


<path id="background" mask="url(#mask)" fill="#F16E18" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/> 

    <path class="letter" mask="url(#mask)" fill="#fff" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/> 
    <path class="letter" mask="url(#mask)" fill="#fff" d="M581.4 718h206v131.1h-206z"/> 

    <path id="hexagon-2" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/> 

    <path id="hexagon-1" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/> 

</svg> 

मैं इसे प्रस्तुत करने के लिए कैसे प्राप्त कर सकता हूं? मैंने इसे link

पर आयनिक फ़ोरम में भी दोहराया है। मैंने एक पाइप जोड़ने की कोशिश की है जो इसे रन टाइम में सुरक्षित रखेगी लेकिन यह भी विफल हो जाती है।

मैं सामग्री बनाया:

<div [innerHTML]='appConfig.customSpinner | safe'></div> 

और ये मेरे पाइप है:

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({name: 'safe'}) 
export class SafeHtml { 
    constructor(private sanitizer:DomSanitizer){} 

    transform(html:any):any { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
} 

मैं भी एक फ़ाइल का उपयोग कर के साथ की कोशिश की है:

let loading = this.loadingCtrl.create({spinner: 'hide', content:"<object data='assets/spinner.svg' type='image/svg+xml'></object>"}) 

यह अभी भी कारण बनता है वही मुद्दा।

नायब **

मेरी कोड मैंने महसूस किया कि आप वेरिएबल के अंदर प्रक्षालक लेकिन कक्षा में नहीं बल्कि एक घोषित चर से वापसी मान असाइन नहीं कर सकते बदलने के बाद। एक मैंने ऐसा किया था अब मुझे टीएस प्रकार की त्रुटि और एसवीजी एक्सएमएल लोड नहीं हुआ है।

Answer 1

स्पिनर सामग्री 'सुरक्षित html', यानी आप bypassSecurityTrustHtml का उपयोग करना चाहिए होना चाहिए। आपके मामले में प्रयोग करके देखें:

let loading = this.loadingCtrl.create({spinner: ' ', 
     content: this.sanitizer.bypassSecurityTrustHtml(this.appConfig.customSpinner) 
}) 

चेक इस related question।

import { DomSanitizer } from '@angular/platform-browser'; 

constructor(private sanitizer: DomSanitizer){ 

getProgressBar(percentaje) { 
    let html: string = '<span style="text-align: center">Loading...' 
    + Math.round(percentaje)+'%</span>' 
    + '<br><progress value="' + percentaje + '" max="100"></progress>'; 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 

doSomething(){ 

    let loading = this.loadingCtrl.create({ 
     spinner: 'hide', 
    }); 
    loading.data.content = this.getProgressBar(0); 
    loading.present(); 

    //some stuff 

    loading.data.content = this.getProgressBar(progress); 
    } 
} 

आशा है कि यह मदद करता है:

यह आयोनिक 3 एप्लिकेशन पर html5 स्पिनर के लिए मेरे कार्य कोड है। svg का उपयोग कर

अद्यतन:

let svg = `<svg width="100" height="100"> 
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
      </svg>`; 

this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg); 

let loading = this.loadingCtrl.create({ 
    spinner: 'hide', 
    content: this.safeSvg, 
}); 
loading.present(); 

काम कर कोड पाया जा सकता है at this git repository

Answer 2

आप भी "src/विषय/variables.scss" जैसे लोडर शैलियों अधिलेखित कर सकते हैं

ion-loading { 
     ion-backdrop { 
      background-color: white !important; 
     } 
     .loading-wrapper { 
      justify-content: center !important; 
      opacity: 0.8 !important; 
      background-color: white !important; 
      width: 100% !important; 
      height: 100% !important; 
      max-width: 100% !important; 
      max-height: 100% !important; 
     } 

     .spinner-crescent circle { 
      stroke: green !important; 
     } 

     .spinner-ios line, 
     .spinner-ios-small line { 
      stroke: green !important; 
     } 
    }