tutorial - angular meaning



Angular2 घटकों के रूप में बूटस्ट्रैप मॉडल्स को गतिशील रूप से कैसे बनाएं? (1)

मूल शीर्षक : कोणीय 2 में गतिशील रूप से संलग्न (HTML) घटक को इनिशियलाइज़ नहीं कर सकता

मैंने एक निर्देश तैयार किया है जो शरीर को मॉडर्नाइजेशन पर जोड़ देता है। जब एक बटन (जिसमें निर्देश इंजेक्ट किया जाता है) पर क्लिक किया जाता है तो यह मोडल फायर हो जाता है। लेकिन मैं चाहता हूं कि इस मॉडल की सामग्री एक और घटक हो (वास्तव में मैं चाहता हूं कि मॉडल घटक हो)। ऐसा लगता है कि मैं घटक को इनिशियलाइज़ नहीं कर सकता।

यहाँ मैंने क्या किया है की एक प्लंकर है:

http://plnkr.co/edit/vEFCnVjGvMiJqb2Meprr?p=preview

मैं अपने घटक के खाके को बनाने की कोशिश कर रहा हूं

 '<div class="modal-body" #theBody>' 
            + '<my-comp></my-comp>' + 
 '</div>

2.0.0 फाइनल के लिए अद्यतन

प्लंकर उदाहरण> = 2.0.0

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ModalComponent, CompComponent],
  providers: [SharedService],
  entryComponents: [CompComponent],
  bootstrap: [ App, ModalComponent ]
})
export class AppModule{}
export class ModalComponent {
  @ViewChild('theBody', {read: ViewContainerRef}) theBody;

  cmp:ComponentRef;

  constructor(
    sharedService:SharedService, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    injector: Injector) {

    sharedService.showModal.subscribe(type => {
      if(this.cmp) {
        this.cmp.destroy();
      }
      let factory = this.componentFactoryResolver.resolveComponentFactory(type);
      this.cmpRef = this.theBody.createComponent(factory)
      $('#theModal').modal('show');
    });
  }

  close() {
    if(this.cmp) {
      this.cmp.destroy();
    }
    this.cmp = null;
  }
}

संकेत

यदि कोई एप्लिकेशन साझा किए गए राज्य को NgZone में बदल देता है या किसी विधि को NgZone के लिए NgZone करने का कारण बनता है और सब्सक्राइबर एक अलग एप्लिकेशन में होता है तो एमिटर, सब्सक्राइबर में कोड NgZone के NgZone में निष्पादित होता है।

इसलिए जब SharedService उपयोग में एक अवलोकन के लिए सदस्यता

class MyComponent {
  constructor(private zone:NgZone, private sharedService:SharedService) {
    private sharedService.subscribe(data => this.zone.run() => {
      // event handler code here
    });
  }
}

परिवर्तन का पता लगाने के लिए ट्रिगर करने के तरीके के बारे में अधिक जानकारी के लिए मैन्युअल रूप से Angular2 परिवर्तन का पता लगाना देखें

मूल

गतिशील रूप से जोड़ा गया HTML कोणीय द्वारा संसाधित नहीं किया जाता है और इसका परिणाम घटकों या निर्देशों में त्वरित या जोड़ा नहीं जाता है।

आप DynamicComponentLoader (पदावनत) ViewContainerRef.createComponent() ( उपयोगकर्ता क्लिक घटकों के साथ कोणीय 2 गतिशील टैब ) का उपयोग करके Angulars रूट घटक (AppComponent) के बाहर घटकों को नहीं जोड़ सकते।

मुझे लगता है कि एंगुलर जड़ घटक के बाहर एक दूसरा घटक बनाने के लिए सबसे अच्छा तरीका है प्रत्येक पर bootstrap() कॉल करना और संवाद करने के लिए एक साझा सेवा का उपयोग करना है:

var sharedService = new SharedService();

bootstrap(AppComponent, [provide(SharedService, {useValue: sharedService})]);
bootstrap(ModalComponent, [provide(SharedService, {useValue: sharedService})]);

प्लंकर उदाहरण Beta.17
प्लंकर उदाहरण Beta.14

@Injectable()
export class SharedService {
  showModal:Subject = new Subject();
}

@Component({
  selector: 'comp-comp',
  template: `MyComponent`
})
export class CompComponent { }


@Component({
  selector: 'modal-comp',
  template: `
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel">
    <div class="modal-dialog largeWidth" role="document">
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="theModalLabel">The Label</h4></div>
        <div class="modal-body" #theBody>
      </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button>
  </div></div></div></div>
`
})
export class ModalComponent {
  cmp:ComponentRef;
  constructor(sharedService:SharedService, dcl: DynamicComponentLoader, injector: Injector, elementRef: ElementRef) {
    sharedService.showModal.subscribe(type => {
      if(this.cmp) {
        this.cmp.dispose();
      }
      dcl.loadIntoLocation(type, elementRef, 'theBody')
      .then(cmp => {
        this.cmp = cmp;
        $('#theModal').modal('show');
      });
    });
  }

  close() {
    if(this.cmp) {
      this.cmp.dispose();
    }
    this.cmp = null;
  }
}


@Component({
  selector: 'my-app',
  template: `
<h1>My First Attribute Directive</h1>
<button (click)="showDialog()">show modal</button>
<br>
<br>`,
})
export class AppComponent {
  constructor(private sharedService:SharedService) {}

  showDialog() {
    this.sharedService.showModal.next(CompComponent);
  }
}




angular