javascript - কৌণিক উপাদান টেমপ্লেটে স্ক্রিপ্ট ট্যাগ যুক্ত করা হচ্ছে




angular json-ld (4)

নিম্নলিখিত কৌণিক 5.2.7 সঙ্গে কাজ করে:

প্রয়োজনীয় আমদানিগুলি হ'ল:

import { Inject, AfterViewInit, ElementRef } from '@angular/core';
import { DOCUMENT } from '@angular/common';

ভিউআইনিট পরে প্রয়োগ করুন:

export class HeroesComponent implements AfterViewInit {

যদি আপনার উপাদানটি আরও একটি ইন্টারফেস প্রয়োগ করে তবে এগুলি কমা দ্বারা পৃথক করুন; উদাহরণ স্বরূপ:

export class HeroesComponent implements OnInit, AfterViewInit {

নির্মাতাকে নীচের যুক্তিগুলি পাস করুন:

constructor(@Inject(DOCUMENT) private document, private elementRef: ElementRef) { }

জীবন-চক্রের দেখার পদ্ধতি এনজিএফটারভিউ যুক্ত করুন:

ngAfterViewInit() {
    const s = this.document.createElement('script');
    s.type = 'text/javascript';
    s.src = '//external.script.com/script.js';
    const __this = this; //to store the current instance to call 
                         //afterScriptAdded function on onload event of 
                         //script.
    s.onload = function () { __this.afterScriptAdded(); };
    this.elementRef.nativeElement.appendChild(s);
  }

স্ক্রিপ্টএড সদস্য ফাংশন যুক্ত করুন।

বাহ্যিক স্ক্রিপ্টটি সফলভাবে লোড হওয়ার পরে এই ফাংশনটি ডাকা হবে। সুতরাং আপনি যে বৈশিষ্ট্য বা ফাংশনগুলি বহিরাগত জেএস থেকে ব্যবহার করতে চান তা এই ফাংশনের শরীরে অ্যাক্সেস করা হবে।

 afterScriptAdded() {
    const params= {
      width: '350px',
      height: '420px',
    };
    if (typeof (window['functionFromExternalScript']) === 'function') {
      window['functionFromExternalScript'](params);
    }
  }

"গরিব মানুষ" লোডার হিসাবে এই কার্যকারিতাটি লোকেদের ব্যবহার বন্ধ করতে কৌণিক 2 টেমপ্লেটগুলি থেকে স্বয়ংক্রিয়ভাবে <script> ট্যাগগুলি সরিয়ে দেয়।

এখানে সমস্যাটি হ'ল স্ক্রিপ্ট ট্যাগগুলিতে কেবল কোড লোড করা বা অন্যান্য স্ক্রিপ্ট ফাইলের চেয়ে বেশি ব্যবহার রয়েছে। ভবিষ্যতে এছাড়াও <script> ট্যাগগুলির চারপাশে আরও কার্যকারিতা চালু হওয়ার সম্ভাবনা রয়েছে।

একটি বর্তমান ব্যবহার হল JSON-LD যা ফর্ম্যাট নেয়

<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"HealthClub",
    ...
}
</script>

চারপাশে সাধারণত প্রস্তাবিত কাজটি হ'ল ngAfterViewInit হুকের মাধ্যমে নথিতে স্ক্রিপ্ট ট্যাগ যুক্ত করা, তবে এটি অবশ্যই যথাযথ এনজি 2 অনুশীলন নয় এবং সার্ভারের পক্ষে কাজ করবে না, যা জেএসওন-এলডি স্পষ্টতই করতে সক্ষম হওয়া দরকার।

আমরা কি কৌনিক 2 টেম্পলেটগুলিতে <script> ট্যাগগুলি অন্তর্ভুক্ত করতে ব্যবহার করতে পারি (অন্য কোনও ট্যাগ ব্রাউজারের মধ্যে জড় থাকলেও) বা ফ্রেমওয়ার্কের ক্ষেত্রে কী খুব বেশি মতামত দেওয়া হচ্ছে? এই পরিস্থিতিটি কৌনিক 2 এ সমাধান করা না গেলে অন্য কোন সমাধানের উপস্থিতি থাকতে পারে?


এখানে পার্টিতে কিছুটা দেরি হতে পারে, তবে যেহেতু উপরের উত্তরগুলি কৌণিক এসএসআরের সাথে ভাল কাজ করে না (যেমন document is not defined সার্ভার-সাইড বা document.createElement is not a function ক্রিয়েট এলিমেন্ট document.createElement is not a function ), তাই আমি এমন একটি সংস্করণ লেখার সিদ্ধান্ত নিয়েছি যা কৌণিকের জন্য কাজ করে 4+, সার্ভার এবং ব্রাউজার উভয় প্রসঙ্গে :

উপাদান বাস্তবায়ন

import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

class MyComponent implements OnInit {

    constructor(
        private _renderer2: Renderer2, 
        @Inject(DOCUMENT) private _document: Document
    ) { }

    public ngOnInit() {

        let s = this._renderer2.createElement('script');
        s.type = `application/ld+json`;
        s.text = `
            {
                "@context": "https://schema.org"
                /* your schema.org microdata goes here */
            }
        `;

        this._renderer2.appendChild(this._document.body, s);
    }
}

পরিষেবা বাস্তবায়ন

দ্রষ্টব্য: পরিষেবাগুলি সরাসরি Renderer2 ব্যবহার করতে পারে না। আসলে, উপাদানটির রেন্ডারিং একটি উপাদান দ্বারা সম্পন্ন করার কথা তবে আপনি এমন কোনও পরিস্থিতিতে নিজেকে সন্ধান করতে পারেন যেখানে আপনি কোনও পৃষ্ঠায় JSON-LD script ট্যাগগুলি তৈরি করতে স্বয়ংক্রিয় করতে চান। উদাহরণ হিসাবে, একটি পরিস্থিতি রুট নেভিগেশন পরিবর্তনের ইভেন্টগুলিতে এই জাতীয় ক্রিয়াকলাপটি আহ্বান করা হতে পারে। অতএব আমি কোনও সংস্করণ যুক্ত করার সিদ্ধান্ত নিয়েছি যা কোনও Service প্রসঙ্গে কাজ করে।

import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

/**
 * Use a Service to automate creation of JSON-LD Microdata.
 */
class MyService {

    constructor(
        @Inject(DOCUMENT) private _document: Document
    ) { }

    /**
     * Set JSON-LD Microdata on the Document Body.
     *
     * @param renderer2             The Angular Renderer
     * @param data                  The data for the JSON-LD script
     * @returns                     Void
     */
    public setJsonLd(renderer2: Renderer2, data: any): void {

        let s = renderer2.createElement('script');
        s.type = 'application/ld+json';
        s.text = `${JSON.stringify(data)}`;

        renderer2.appendChild(this._document.body, s);
    }
}

আসলে কোনও টেমপ্লেটে স্ক্রিপ্ট ট্যাগ যুক্ত করার কোনও Angular2 উপায় নেই। তবে আপনি প্রথমে কৌতুক 2 থেকে আফটারভিউআইনিট এবং ElementRef আমদানি করতে প্রথমে কিছু কৌশল করতে পারেন:

import {Component,AfterViewInit,ElementRef} from 'Angular2/core';

তারপরে আপনি এগুলি আপনার ক্লাসে তাদের মতো বাস্তবায়ন করবেন:

export class example1 implements AfterViewInit{}

এবং এখানে একটি খুব সাধারণ জাভাস্ক্রিপ্ট ডম ট্রিক যা আপনি করতে যাচ্ছেন

 export class example1 implements AfterViewInit{
 ngAfterViewInit()
 {
  var s=document.createElement("script");
  s.type="text/javascript";
  s.innerHTML="console.log('done');"; //inline script
  s.src="path/test.js"; //external script
 }
}

 const head = document.getElementsByTagName('head')[0]; const _js = document.createElement('script'); _js.type = 'text/javascript'; _js.appendChild(document.createTextNode('{your js code here}')); head.appendChild(_js); 

এটি যে কোনও জায়গায় যে কোনও জায়গায় রাখা যায় এবং এটি একটি ভাল পদ্ধতির approach





angular2-universal