دنبال کنندگان


تعداد دنبال کنندگان : 1 نفر

مشخصات عمومی کاربر

: حسین اکبرزاده
: hossein
: 1367/06/01 ( 31
: تهران
: تهران
: مهندس کامپیوتر - نرم افزار
: فوق لیسانس مدیریت IT
: http://arbatan.com

پست ها

کامپوننت ها در انگولار
در تاریخ توسط

 برای ارسال مقدار فیلدها در انگولار از والد به فرزند به راحتی در کامپوننت پدر مقدار درون تگ بایند میشود ودر کامپوننت فرزند فیلد به صورت Import@ دریافت میشود.

به عنوان مثال میشه یک آرایه رو از کامپوننت والد پر کرد و فرستاد توی کامننت فرزند و نمایش داد.

ارسال از کامپوننت والد به فرزند

کامپوننت والد

@Component({
  selector: 'app-root',
  template:'<display-error-messages [messages]="errorMessages"></display-error-messages>'
})
export class AppComponent {

  public constructor() {

    this.errorMessages = [
      'Error Message 1',
      'Error Message 2',
      'Error Message 3',
    ];
  }

  public errorMessages: string[];

}
و کامپوننت فرزند
@Component({
  selector: 'display-error-messages',
  template:
    `<div class="alert alert-danger">
	<ul>
	   <li *ngFor="let item of messages">{{ item }}</li>
	</ul>
     </div>`
})
export class DisplayErrorMessagesComponent {

  public constructor() { 
  @Input() public messages: string[]
}

ارسال از کامپوننت فرزند به والد
برای اینکه از کامپوننت فرزند بشه یک متغیر و یا چند متغیر (در قالب یک object) را به کامپوننت والد ارسال کرد باید اول emitter تعریف کرد .توسط emit متغیر یا شی به دنیای بیرون معرفی می‌شود.
کامپوننت فرزند
@Component({
  selector: 'app-child',
  template:
    `<h3>I'm Child!</h3>
     <button type="button" (click)="onClick()">Click Me!</button>`,
})
export class ChildComponent {

  public constructor() { }

  @Output() public insideButtonClick = new EventEmitter();

  public onClick(): void {

    this.insideButtonClick.emit(`This Message Sent By Child!`);

  }

}
کامپوننت والد
برای دسترسی به متغیرهای کامپونن child  در والد باید درون تگ معرفی کامپوننت child در والد به صورت یک event نام emitter کامپوننت child نوشته شود و بعد متدی صدا شود که ورودی آن در واقع همان متغیر یا شی ای است که اینجا به صورت event$ به کامپوننت والد جاری رسیده است
@Component({
  selector: 'app-root',
  template:
    `<h1>I'm Parent:</h1>Message: {{ message }}
     <hr>
     <app-child (insideButtonClick)="doSomething($event)"></app-child>
    `,
})
export class AppComponent {

  public constructor() {

    this.message = `First Message!`;

  }

  public message: string;

  public doSomething(sentMessage: string): void {

    this.message = sentMessage;

  }

}

- ارسال تایمر از چایلد به پرنت
کامپوننت چایلد
import { OnInit } from '@angular/core';
import { Output } from '@angular/core';
import { Component } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Component({
  selector: 'child-app',
  templateUrl: './child-app.component.html',
  styleUrls: ['./child-app.component.css']
})
export class ChildAppComponent implements OnInit {

  constructor() { }
  @Output() public myEmitter = new EventEmitter();

  public ngOnInit() {
    setInterval(() => { this.myEmitter.emit(); }, 1000)
  }

}
کامپوننت پرنت
import { Component } from '@angular/core';
import { ChildAppComponent } from './child-app/child-app.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public myparam: number;

  constructor() {
this.counter = 0;
  }
  public counter : number;
  public myMethod():void {
    this.counter++;
  }

}
HTML پرنت
MyParent counter = {{counter}}
نمایش آنلاین : https://stackblitz.com/edit/angular-fzkqbq




گروه های پست :
مشاهده : 41
پسندها : 1
پیوست ها : 0
قوانین Angular
در تاریخ توسط

قوانین قرار دادی برای نامگذاری در انگولار به این شکل است که:

برای نامگذاری کلاس‌های مرتبط با کامپوننت‌ها و ... و هر نوع کلاسی  حرف اول باید بزرگ باشد.

برای نامگذاری خود فایل‌های کامپوننت‌ها ، دایرکتیوها و ماژول‌ها و ... که توی Explorer نمایش داده میشود تمام حروف باید کوچک باشد و بین چند قسمتی‌ها از - استفاده شود.

برای نامگذاری فیلدها و هر چیز دیگری فرمت camelCase باید نوشته شود. 11000

Class => PascalCase like MyClass
File=>lowercase like my-file-name.ts
Other=>camelCase  like myParam

گروه های پست :
مشاهده : 21
پسندها : 0
پیوست ها : 0
محدود کردن تعداد عددهای ورودی
در تاریخ توسط
برای محدود کردن تعداد عددهای ورودی در Input
< input type="text" pattern="\d*" maxlength="4" >

گروه های پست :
مشاهده : 24
پسندها : 0
پیوست ها : 0
نکات انگولار 8
در تاریخ توسط
 نصب انگولار
npm i -g @angular/cli 
فهمیدن ورژن انگولار
ng version
ساخت پروژه
ng new my-ap
اجرای پروژه انگولار و باز کردن مرورگر
ng serve --open  
یا
ng s –open
اجرا با پورت دلخواه
ng s --port 1010
ساخت کامپوننت
ng g c YourName 
ساخت Module
ng g m YourName

نکته - آدرس دهی در انگولار باید برای فایل‌های کنار هم به شکل /. باشد .
ساخت interface و کلاس یا model با نام یکسان و استفاده بدون اینکه conflict رخ دهد به شکل زیر ممکن است .
import * as Models from ./models/mymodel;
import * as Interfaces from ./interfaces/myinterface;
و استفاده از آن
public myModel = Interfaces.MyInterface;
public constructor{
     this.myModel = new Models. MyModel();
}








گروه های پست :
مشاهده : 23
پسندها : 0
پیوست ها : 0
رووت در لینوکس
در تاریخ توسط

 برای سوییچ به رووت در لینوکس

sudo su -
سپس پسورد زده میشود.
گروه های پست :
مشاهده : 18
پسندها : 0
پیوست ها : 0
پست های بیشتر
loading...

لطفا منتظر بمانید...