typescript - Angular2 এর সাথে মেটেরিয়াল ডিজাইন লাইট একীকরণ করা হচ্ছে




integration (5)

আমি Angualrjs চ্যানেল থেকে সমাধান পেতে সক্ষম হয়েছি, এবং এটি সুপার শীতল সমাধান, অফসোর্স আমাদের componentHandler.upgradeElement(this.elementRef.nativeElement); ব্যবহার করতে হবে componentHandler.upgradeElement(this.elementRef.nativeElement);

// এটি তৈরির উপায়

@Directive({
  selector: '[mdlUpgrade]'
})
class MdlUpgradeDirective {
  @Input() mglUpgrade;

  constructor(el: ElementRef) {
    componentHandler.upgradeElement(el.nativeElement);
  }
}

@Component ({
  selector: 'login',
   ...
  directives: [MdlUpgradeDirective]
})

এবং এটি ব্যবহার করতে এইচটিএমএল ট্যাগগুলিতে নির্দেশিকা ব্যবহার করুন।

এটি কাজ করে,

দ্রষ্টব্য: https://github.com/justindujardin/ng2-material উপাদান, এই ছেলেরা দুর্দান্ত দুর্দান্ত উপাদান তৈরি করেছে, এটিও উল্লেখ করতে পারে

এনজি 2-তে একটি মেটেরিয়াল ডিজাইন ( http://www.getmdl.io/ ) সংহত করার ক্ষেত্রে আমার একটি ছোট সমস্যা আছে আপনি কি আমাকে সাহায্য করতে পারেন আমি যা করেছি তা পয়েন্টগুলিতে রাখব

  1. http://www.getmdl.io/started/index.html#tab1 , ডিজাইনের সংহতকরণের ব্যাখ্যা দেয়
  2. http://www.getmdl.io/components/index.html#textfields-section , এটি ভাসমান Plunkr একটি উদাহরণ এবং এখন আমার কাছে Plunkr , যা আমি সংহত করেছি, তবে কী কাজ করতে পারেন না দয়া করে আপনি একবার দেখতে পারেন আপনি যেমন সূচী। Html এ দেখতে পাচ্ছেন আমার কাছে http://www.getmdl.io/started/index.html#tab1 দ্বারা প্রস্তাবিত CSS এবং js ফাইল অন্তর্ভুক্তি রয়েছে

<!-- GetMDL scripts --> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- GetMDL scripts --> এবং app.componal.ts ফাইলে:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>`,
encapsulation:ViewEncapsulation.None,
})

আমি একই সমস্যার মুখোমুখি হয়েছি (যেমনটি আমি আপনার মতো একই টেম্পলেট ব্যবহার করছি)।

কেবলমাত্র componentHandler.upgradeAllRegistered() চেষ্টা করে দেখুন এটি আপনার ক্ষেত্রে ভাল কাজ করবে।

যখন আপনি শিরোনামকে ছোট উপাদানগুলিতে বিভক্ত করার চেষ্টা করেন তখন একটি ভিন্ন সমস্যা দেখা দেয়।


এনজি 2-ওয়েবপ্যাক ডেমো প্রকল্পটিতে একটি সাধারণ এনজি 2 সিআরইউডি অ্যাপ্লিকেশন রয়েছে যা ভ্যানিলা এমডিএল ব্যবহার করে

পদক্ষেপ:

  • এনপিএম ইনস্টল - সেভ মেটাল-ডিজাইন-লাইট
  • সম্পূর্ণ লাইব্রেরি src / vendor.js এ আমদানি করুন
  • বা কেবল কাঙ্ক্ষিত উপাদান
  • এসসিআর / স্টাইল / অ্যাপ.এসএসএস-এ, পছন্দসই উপাদানগুলি আমদানি করুন:

সমস্যা:

ইস্যু - MDL সংযোজন করা DOM প্রভাব প্রয়োগ করা হয় না:

  • ধারাবাহিকভাবে রাষ্ট্র পরিবর্তনের সময়
  • রুট পরিবর্তনের সময়

সমাধান:

ngAfterViewInit() {
    // Ensure material-design-lite effects are applied
    componentHandler.upgradeDom();
}

আরও তথ্যের জন্য ম্যাটেরিয়াল ডিজাইন লাইটের সাথে কাজ করা দেখুন।


কেবলমাত্র angular2/core থেকে ElementRef এবং OnInit আমদানি ElementRef এবং এটি কোনও নির্মাণকারীকে ইনজেক্ট করুন:

constructor(@Inject(ElementRef) elementRef: ElementRef) {
    this.elementRef = elementRef;

}

তারপরে একটি ngOnInit পদ্ধতি ব্যবহার করুন এবং আপনি যে কোনও ngOnInit যুক্ত ট্যাগটিতে ব্যবহৃত componentHandler.upgradeElement ngOnInit ব্যবহার করুন।


সমস্যাটি হচ্ছে মেটালিয়াল ডিজাইন লাইট অ্যাঙ্গুলার 2 দ্বারা উত্পাদিত ডাইনামিক পৃষ্ঠাগুলির সাথে ব্যবহার করার জন্য ডিজাইন করা হয়নি। এটি বলেছে যে এমডিএল componentHandler.upgradeElement হ্যান্ডলারের আপগ্রেডএলমেন্ট ফাংশনটি ব্যবহার করে এটি সম্ভব হওয়া উচিত।

এ সম্পর্কে আরও তথ্য এখানে পাওয়া যাবে: http://www.getmdl.io/started/#dynamic /# http://www.getmdl.io/started/#dynamic

আমি আপনার কৌণিক উপাদানগুলিতে একটি এলিমেন্টের রেফ পাওয়ার পরামর্শ দিচ্ছি তারপরে আপনার উপাদানগুলির একটিতে লাইফসাইকেল হুকের এলিমেন্ট ElementRef এই ফাংশনটি কল করব, সম্ভবত ngAfterViewInit()





angular