Angular 2
विश्वसनीय मूल्यों के लिए स्वच्छता को दरकिनार करना

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript

पैरामीटर

पैरामीटर	विवरण
चयनकर्ता	टैग नाम आप html में अपने घटक का संदर्भ देते हैं
टेम्पलेट (templateUrl)	एक स्ट्रिंग जो html का प्रतिनिधित्व करती है जिसे `<selector>` टैग जहां भी डाला जाएगा। टेम्पलेटउल्लेख उसी व्यवहार के साथ एक html फ़ाइल का पथ है
पाइप	इस घटक द्वारा उपयोग किए जाने वाले पाइपों की एक सरणी।

टिप्पणियों

सुपर महत्वपूर्ण!

एक्सईएसएस (क्रॉस-साइट स्क्रिप्टिंग) और अन्य ATTACK वैक्टर्स के जोखिम पर आपको सलाह देते हुए। कृपया सुनिश्चित करें कि आप 100% प्राप्त कर रहे हैं

पाइप्स का उपयोग करने से आपको केवल इस तरह के विशेषता मूल्यों को बदलने का आरोप लगता है:

<tag [attribute]="expression or variable reference | pipeName">

आप इस तरह से पाइप का उपयोग करने में सक्षम नहीं हैं:

<tag attribute="expression or variable reference | pipeName">

या इस तरह से

<tag attribute={{expression or variable reference | pipeName}}

पाइप के साथ स्वच्छता को दरकिनार करना (कोड पुनः उपयोग के लिए)

परियोजना यहाँ Angular2 Quickstart गाइड से संरचना का अनुसरण कर रही है ।

RootOfProject
|
+-- app
|   |-- app.component.ts
|   |-- main.ts
|   |-- pipeUser.component.ts
|   \-- sanitize.pipe.ts
|
|-- index.html
|-- main.html
|-- pipe.html

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

यह प्रोजेक्ट के रूट में index.html फ़ाइल को ढूँढता है, और उसी का निर्माण करता है।

app.component.ts

import { Component } from '@angular/core';
import { PipeUserComponent } from './pipeUser.component';

@Component({
    selector: 'main-app',
    templateUrl: 'main.html',
    directives: [PipeUserComponent]
})

export class AppComponent { }

यह शीर्ष स्तर का घटक है जो उपयोग किए जाने वाले अन्य घटकों को समूह बनाता है।

pipeUser.component.ts

import { Component } from '@angular/core';
import { IgnoreSanitize } from "./sanitize.pipe";

@Component({
    selector: 'pipe-example',
    templateUrl: "pipe.html",
    pipes: [IgnoreSanitize]
})

export class PipeUserComponent{
    constructor () { }        
    unsafeValue: string = "unsafe/picUrl?id=";
    docNum: string;

    getUrl(input: string): any {
        if(input !== undefined) {
            return this.unsafeValue.concat(input);
            // returns : "unsafe/picUrl?id=input"
        } else {
            return "fallback/to/something";
        }
    }
}

यह घटक पाइप के साथ काम करने के लिए दृश्य प्रदान करता है।

sanitize.pipe.ts

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

@Pipe({
    name: 'sanitaryPipe'
})
export class IgnoreSanitize implements PipeTransform {

   constructor(private sanitizer: DomSanitizationService){}

   transform(input: string) : any {
       return this.sanitizer.bypassSecurityTrustUrl(input);
   }

}

यह वह तर्क है जो बताता है कि पाइप प्रारूप क्या है।

index.html

<head>
    Stuff goes here...
</head>
<body>
    <main-app> 
        main.html will load inside here.
    </main-app>
</body>

main.html

<othertags> 
</othertags>

<pipe-example>  
    pipe.html will load inside here.
</pipe-example>

<moretags>
</moretags>

pipe.html

<img [src]="getUrl('1234') | sanitaryPipe">
<embed [src]="getUrl() | sanitaryPipe">

यदि आप HTML का निरीक्षण कर रहे थे, जबकि ऐप चल रहा है, तो आप देखेंगे कि यह इस तरह दिखता है:

<head>
    Stuff goes here...
</head>

<body>

    <othertags> 
    </othertags>
    
    <img [src]="getUrl('1234') | sanitaryPipe">
    <embed [src]="getUrl() | sanitaryPipe">
    
    <moretags>
    </moretags>

</body>

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow