TypeScript core.ElementRef類代碼示例

本文整理匯總了TypeScript中@angular/core.ElementRef類的典型用法代碼示例。如果您正苦於以下問題：TypeScript ElementRef類的具體用法？TypeScript ElementRef怎麽用？TypeScript ElementRef使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。

在下文中一共展示了ElementRef類的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: myLayout

    	myLayout(el:ElementRef) {
		
		let container = el.getClientRects()[0];
		
		let c_width = container.width,   //container-height
		    c_height = container.height,
			
			h_width = 150,   //hex size
			h_height = 86,
			w_dist = 6,     
			h_dist = 46;
			
	
	}

開發者ID:kevinchen278，項目名稱:innlab，代碼行數:14，代碼來源:demod.component.ts

示例2: myLayout

 	myLayout(el:ElementRef) {
		
		let container = el.getClientRects()[0];
		
		let c_width = container.width,   //container-height
		    c_height = container.height,
			
			h_width = 150,   //hex size
			h_height = 86,
			w_dist = 6,     
			h_dist = 46;
			
		if (c_width>639) {
			let pad_left = c_width/2 - (h_width + w_dist) * 4/2,
			    level_top1 = 55,
				level_height = h_height + h_dist + w_dist/2,
				row_width = h_width + w_dist;
			
			//layer 1
			
			el.children[0].style.left = pad_left + 1.5*row_width;
			el.children[0].style.top = level_top1;
			
            //layer 2
			el.children[1].style.left = pad_left + row_width;
			el.children[1].style.top = level_top1 + level_height;

			el.children[2].style.left = pad_left + 2*row_width;
			el.children[2].style.top = level_top1 + level_height;

            //layer 3
			el.children[3].style.left = pad_left + 0.5*row_width;
			el.children[3].style.top = level_top1 + 2*level_height;

			el.children[9].style.left = pad_left + 1.5*row_width;
			el.children[9].style.top = level_top1 + 2*level_height + 13 ;

			el.children[4].style.left = pad_left + 2.5*row_width ;
			el.children[4].style.top = level_top1 + 2*level_height ;


            //layer 4
			el.children[6].style.left = pad_left + 0*row_width;
			el.children[6].style.top = level_top1 + 3*level_height ;
			
			el.children[7].style.left = pad_left + 1*row_width ;
			el.children[7].style.top = level_top1 + 3 * level_height;

			el.children[8].style.left = pad_left + 2 * row_width ;
			el.children[8].style.top = level_top1 + 3 * level_height ;
			
			el.children[5].style.left = pad_left + 3*row_width;
			el.children[5].style.top = level_top1 + 3 * level_height ;			


		} else if (c_width > 480 ) {
			let pad_left = c_width/2 - (h_width + w_dist) * 3/2,
			    level_top1 = 55,
				level_height = h_height + h_dist + w_dist/2,
				row_width = h_width + w_dist;
			
			//layer 1
			
			el.children[0].style.left = pad_left ;
			el.children[0].style.top = level_top1;
			
			el.children[1].style.left = pad_left + row_width;
			el.children[1].style.top = level_top1;

			el.children[2].style.left = pad_left + 2*row_width;
			el.children[2].style.top = level_top1;


			//layer 2
			el.children[3].style.left = pad_left + 0.5*row_width;
			el.children[3].style.top = level_top1 + level_height ;

			el.children[4].style.left = pad_left + 1.5*row_width ;
			el.children[4].style.top = level_top1 + level_height ;
			
			//lay-3
			el.children[9].style.left = pad_left + 1*row_width;
			el.children[9].style.top = level_top1 + 2 * level_height + 13;			
			
			
			//lay-4

			el.children[5].style.left = pad_left + 0.5*row_width;
			el.children[5].style.top = level_top1 + 3*level_height ;

			el.children[6].style.left = pad_left + 1.5*row_width;
			el.children[6].style.top = level_top1 + 3*level_height ;
			
			//layer 5

			el.children[7].style.left = pad_left  ;
			el.children[7].style.top = level_top1 + 4 * level_height;

			el.children[8].style.left = pad_left + 1 * row_width ;
			el.children[8].style.top = level_top1 + 4 * level_height ;
//.........這裏部分代碼省略.........

開發者ID:kevinchen278，項目名稱:innlab，代碼行數:101，代碼來源:demo.component.ts

示例3: ngAfterViewInit

    ngAfterViewInit() {
        const down = Observable.fromEvent(this.down.nativeElement, 'click')
        const up = Observable.fromEvent(this.up.nativeElement, 'click')

        this.counter = down
            .mapTo(-1)
            .merge(up.mapTo(1))
            .startWith(0)
            .scan<number>((prev, cur) => prev+cur, 0)

        down
            .buffer(down.debounceTime(250))
            .map(clicks => clicks.length)
            .filter(length => length == 2)
            .subscribe(
                (val) => console.log('doubleclick', val),
                (err) => console.error(err),
                () => console.log('complete')
            )

        // down
        //     .bufferTime(250)
        //     // .filter((clicks:any[]) => clicks.length > 1)
        //     .subscribe((val) => {
        //         console.log('buff', val);
        //     })
    }

開發者ID:pawelkocot，項目名稱:frp，代碼行數:27，代碼來源:app.component.ts

示例4: ngAfterContentInit

 ngAfterContentInit() {
   let el = this.el.nativeElement;
   let title = el.querySelector('panel-title');
   let content = el.querySelector('panel-content');
   title.innerHTML = this.md.toHTML(title.innerHTML);
   content.innerHTML = this.md.toHTML(content.innerHTML);
 }

開發者ID:HalasNet，項目名稱:switching-to-angular2，代碼行數:7，代碼來源:app.ts

示例5: showActive

  /**
   * Show active indication.
   */
  public showActive(): void {
    const line = this.line.nativeElement as StackLayout;
    line.opacity = 1;

    if (line.ios) {
      line.animate({
        duration: 1000,
        scale: { x: 1.0, y: 1.0 },
        curve: AnimationCurve.easeInOut,
      });
    } else {
      line.scaleX = 1;
    }
  }

開發者ID:racketometer，項目名稱:frontend-application，代碼行數:17，代碼來源:tab.component.ts

示例6: ngOnInit

 ngOnInit() {
   let user = this.session.get().user;
   let color = 'black';
   if (user && user.theme_color && user.theme_color.accent) {
     color = user.theme_color.accent;
   }
   let style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = `
     a:hover, .activeLink { color: ${color} !important; }
     a:hover .badge, .activeLink .badge { background: ${color} !important; }
   `;
   let el = this.el.nativeElement;
   el.insertBefore(style, el.firstChild);
 }

開發者ID:StudioProcess，項目名稱:imagetool，代碼行數:15，代碼來源:navigation.component.ts

示例7: recalculateDimensionsAndSetMode

    recalculateDimensionsAndSetMode() {
        var el = this.el.nativeElement.getElementsByClassName('view')[0];
        var rect = el.getBoundingClientRect();
        this.width = rect.width;
        this.height = rect.height;

        var adjustedMode = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');

        if (this.mode != adjustedMode) {
            this.mode = adjustedMode;
            var time = new Date();
            this.lastModeChange = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
            this.modeChanged();
        }
    }

開發者ID:HydAu，項目名稱:ng2VscodeTemplate，代碼行數:15，代碼來源:template.component.ts

示例8: gameLoop

 animate(playerClass,playerAction){
   /* Set up canvas variables */
   var canvas = this.canvas.nativeElement;
   var character,characterImage;
   function gameLoop(){
     window.requestAnimationFrame(gameLoop);
     character.update();
     character.render();
   }
   /* Animate based on player and action */
   switch(playerClass){
     // elementalist : piccolo
     case ("Elementalist"):
       switch(playerAction){
         case("strike"):
           // Get canvas
           canvas.width = 150;
           canvas.height = 162;
           // Create sprite sheet
           characterImage = new Image();
           // Create sprite
           character = this.sprite({
             context: canvas.getContext("2d"),
             width: 450,
             height: 162,
             image: characterImage,
             numberOfFrames: 3,
             ticksPerFrame: 4
           });
           // Load sprite sheet
           characterImage.addEventListener("load", gameLoop);
           characterImage.src = "images/sprites/player-2/piccolo/piccolo-punch.png";
           break;
         case("special"):
           // Get canvas
           canvas.width = 190;
           canvas.height = 162;
           // Create sprite sheet
           characterImage = new Image();
           // Create sprite
           character = this.sprite({
             context: canvas.getContext("2d"),
             width: 380,
             height: 162,
             image: characterImage,
             numberOfFrames: 2,
             ticksPerFrame: 20
           });
           // Load sprite sheet
           characterImage.addEventListener("load", gameLoop);
           characterImage.src = "images/sprites/player-2/piccolo/piccolo-magic.png";
           break;
         case("defend"):
           // Get canvas
           canvas.width = 120;
           canvas.height = 162;
           // Create sprite sheet
           characterImage = new Image();
           // Create sprite
           character = this.sprite({
             context: canvas.getContext("2d"),
             width: 240,
             height: 162,
             image: characterImage,
             numberOfFrames: 2,
             ticksPerFrame: 20
           });
           // Load sprite sheet
           characterImage.addEventListener("load", gameLoop);
           characterImage.src = "images/sprites/player-2/piccolo/piccolo-defend.png";
           break;
         default:
           this.animateStance(playerClass);
       }
       break;
     // highwayman : trunks
     case ("Highwayman"):
       switch(playerAction){
         case("strike"):
           // Get canvas
           canvas.width = 185;
           canvas.height = 162;
           // Create sprite sheet
           characterImage = new Image();
           // Create sprite
           character = this.sprite({
             context: canvas.getContext("2d"),
             width: 556,
             height: 162,
             image: characterImage,
             numberOfFrames: 3,
             ticksPerFrame: 8
           });
           // Load sprite sheet
           characterImage.addEventListener("load", gameLoop);
           characterImage.src = "images/sprites/player-2/trunks/trunks-punch.png";
           break;
         case("special"):
           // Get canvas
           canvas.width = 190;
//.........這裏部分代碼省略.........

開發者ID:JacobDeming，項目名稱:HotfixEngine，代碼行數:101，代碼來源:player2sprite.component.ts

示例9: gameLoop

 animateDefeat(playerClass){
   /* Set up canvas variables */
   var canvas = this.canvas.nativeElement;
   var character,characterImage;
   function gameLoop(){
     window.requestAnimationFrame(gameLoop);
     character.update();
     character.render();
   }
   switch(playerClass){
     case("Elementalist"):
       // Get canvas
       canvas.width = 162;
       canvas.height = 162;
       // Create sprite sheet
       characterImage = new Image();
       // Create sprite
       character = this.sprite({
         context: canvas.getContext("2d"),
         width: canvas.width,
         height: canvas.height,
         image: characterImage,
         numberOfFrames: 1,
         ticksPerFrame: 10
       });
       // Load sprite sheet
       characterImage.addEventListener("load", gameLoop);
       characterImage.src = "images/sprites/player-1/piccolo/piccolo-defeat.png";
       break;
     case("Highwayman"):
       // Get canvas
       canvas.width = 177;
       canvas.height = 162;
       // Create sprite sheet
       characterImage = new Image();
       // Create sprite
       character = this.sprite({
         context: canvas.getContext("2d"),
         width: canvas.width,
         height: canvas.height,
         image: characterImage,
         numberOfFrames: 1,
         ticksPerFrame: 10
       });
       // Load sprite sheet
       characterImage.addEventListener("load", gameLoop);
       characterImage.src = "images/sprites/player-1/trunks/trunks-defeat.png";
       break;
     case("Paragon"):
       // Get canvas
       canvas.width = 162;
       canvas.height = 162;
       // Create sprite sheet
       characterImage = new Image();
       // Create sprite
       character = this.sprite({
         context: canvas.getContext("2d"),
         width: canvas.width,
         height: canvas.height,
         image: characterImage,
         numberOfFrames: 1,
         ticksPerFrame: 10
       });
       // Load sprite sheet
       characterImage.addEventListener("load", gameLoop);
       characterImage.src = "images/sprites/player-1/gohan/gohan-defeat.png";
       break;
   }
 }

開發者ID:JacobDeming，項目名稱:HotfixEngine，代碼行數:69，代碼來源:player1sprite.component.ts

注：本文中的@angular/core.ElementRef類示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。