angular-docs-cn/aio/src/app/embedded/code/code-example.component.ts

/* tslint:disable component-selector */
import { Component, ElementRef, OnInit } from '@angular/core';
import { getBoolFromAttribute } from 'app/shared/attribute-utils';

/**
 * An embeddable code block that displays nicely formatted code.
 * Example usage:
 *
 * ```
 * <code-example language="ts" linenums="2" class="special" title="Do Stuff">
 * // a code block
 * console.log('do stuff');
 * </code-example>
 * ```
 */
@Component({
  selector: 'code-example',
  template: `
    <header *ngIf="title">{{title}}</header>
    <aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code"
    [language]="language" [linenums]="linenums" [path]="path" [region]="region" [hideCopy]="hideCopy"></aio-code>
  `
})
export class CodeExampleComponent implements OnInit {

  code: string;
  language: string;
  linenums: boolean | number;
  path: string;
  region: string;
  title: string;
  hideCopy: boolean;

  constructor(private elementRef: ElementRef) {
    const element = this.elementRef.nativeElement;

    this.language = element.getAttribute('language') || '';
    this.linenums = element.getAttribute('linenums');
    this.path = element.getAttribute('path') || '';
    this.region = element.getAttribute('region') || '';
    this.title = element.getAttribute('title') || '';
    this.hideCopy = getBoolFromAttribute(element, ['hidecopy', 'hide-copy']);
  }

  ngOnInit() {
    // The `codeExampleContent` property is set by the DocViewer when it builds this component.
    // It is the original innerHTML of the host element.
    this.code = this.elementRef.nativeElement.codeExampleContent;
  }
}