Question

我正在使用Angular 2 rc1。我有一个组件显示一个帖子和一个带有slider-template的组件。如何将数据从post组件传递到滑块组件

PortfolioDetail.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Router, RouteSegment } from '@angular/router';

import { PortfolioService } from './portfolio.service';
import { Helper } from '../../Services/helper.service';
import { SliderComponent } from './SliderComponent';

@Component({
  'selector': 'portfolio',
  'templateUrl': '/api/templates/PostComponent.portfoliodetail',
  'providers': [PortfolioService, Helper],
  'directives': [ROUTER_DIRECTIVES, SliderComponent],
  'encapsulation': ViewEncapsulation.None,
  'styleUrls': ['assets/css/post.css']
})

export class PortfolioDetailComponent implements OnInit {
  public post;
  public categories;
  public active = 0;

  constructor(
    private _portfolioService: PortfolioService,
    private _http: Http,
    private _router: Router,
    private _segment: RouteSegment,
    public helper: Helper
  ) {
  }

  ngOnInit() {

    let slug = this._segment.getParam('slug');

    this._portfolioService.getPost(slug)
      .subscribe(data => this.post = data);

    this._portfolioService.getCategories()
      .subscribe(data => this.categories = data);
  }

  setActive(i) {
    this.active = i;
  }
}

滑块组件

import { Component, ViewEncapsulation } from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { withType } from '../../Services/withType.pipe';

import { PortfolioService } from './portfolio.service';

@Component({
    'selector': 'slider',
    'templateUrl': '/api/templates/PostComponent.slider',
    'pipes': [ withType ]
})

export class SliderComponent {
  constructor() {
    // How do I obtain "this.post" from PortfolioDetail Component
  }
}

投资组合详细信息模板

<div class="container">
  <article class="post-content" itemscope itemtype="http://schema.org/Article">
    <header class="page-head">
      <h1 itemprop="headline">@{{ post?.title }}</h1>
      <h5 class="published" *ngIf="post != null"><i class="glyphicon glyphicon-time"></i> @{{ helper.dateObject(post?.published_at) | date }}</h5>

      <ul>
        <li *ngFor="let categorie of post?.categories">
          <a [routerLink]="['/blog/categorie/', categorie.slug]">@{{ categorie.name }}</a>
        </li>
      </ul>
    </header>

    <div class="body" itemprop="articleBody">
      <div class="row">
        <div class="col-xs-12 col-md-6" *ngIf="post != null">

          <slider></slider> <!-- the slider selector -->

        </div>

        <div class="body col-xs-12 col-md-6 sticky-content" [innerHTML]="post?.content">
        </div>
      </div>
    </div>
  </article>
</div>

滑块模板

<div class="gallery" *ngIf="(post.images | withType:'gallery').length > 0">
  <ul class="gallery-items clearfix">
    <li *ngFor="let image of (post.images | withType:'gallery'); let current = index" [ngClass]="{active:(current == active)}">
      <img alt="@{{ image.alt }}" src="media/640/@{{ image.file }}" width="640" />
    </li>
  </ul>

  <ol class="gallery-nav" *ngIf="(post.images | withType:'gallery').length > 1">
`     <li *ngFor="let image of (post.images | withType:'gallery'); let i = index" [ngClass]="{active:(i == active)}" (click)="setActive(i)">
      <img alt="@{{ image.alt }}" src="media/250/@{{ image.file }}" width="100" />
    </li>
  </ol>
</div>

Answer 1

要将数据从组件传递到其模板中的组件，您可以使用数据绑定。接收组件需要输入，如：

@Component({
    'selector': 'slider',
    'templateUrl': '/api/templates/PostComponent.slider',
    'pipes': [ withType ]
})
export class SliderComponent {
  @Input() post;
  ngOnInit() {
    console.log(this.post);
  }
}

在父组件的模板中（组合）post可以绑定到滑块的post输入，如：

<slider [post]="post"></slider> <!-- the slider selector -->

Answer 2

大多数情况下，我们使用共享服务。此服务允许您共享数据。

#include "DXApp.h"

namespace {

DXApp * g_pApp = nullptr;
}

LRESULT CALLBACK MainWndProc(HWND hwnd, unsigned int msg, WPARAM wParam, LPARAM lParam) {

if (g_pApp) return g_pApp->MsgProc(hwnd, msg, wParam, lParam);
else return DefWindowProc(hwnd, msg, wParam, lParam);
}



//VERTEX

struct Vertex {
Vertex() {}
Vertex(float x, float y, float z) : pos(x, y, z) {}
DirectX::XMFLOAT3 pos;

};

D3D11_INPUT_ELEMENT_DESC layout[] = {
{ "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
};
unsigned int numLayoutElements = ARRAYSIZE(layout);



DXApp::DXApp(HINSTANCE hInstance)
{
hAppInstance = hInstance;
hAppWnd = NULL;
ClientWidth = 1280;
ClientHeight = 720;
AppTitle = "DirectX11 Engine";
WindStyle = WS_OVERLAPPEDWINDOW;
g_pApp = this;

//DIRECTX

device = nullptr;
swapChain = nullptr;
immediateContext = nullptr;
renderTargetView = nullptr;

vertexShader = nullptr;
pixelShader = nullptr;
triangleVertBuffer = nullptr;
VSBuffer = nullptr;
PSBuffer = nullptr;
vertLayout = nullptr;
}

void DXApp::cleanUp()
{
if (immediateContext) immediateContext->ClearState();
Memory::SafeRelease(renderTargetView);
Memory::SafeRelease(immediateContext);
Memory::SafeRelease(swapChain);
Memory::SafeRelease(device);

Memory::SafeRelease(vertLayout);
Memory::SafeRelease(PSBuffer);
Memory::SafeRelease(VSBuffer);
Memory::SafeRelease(triangleVertBuffer);
Memory::SafeRelease(pixelShader);
Memory::SafeRelease(vertexShader);
}


DXApp::~DXApp()
{
//DIRECTX CLEANUP
if (immediateContext) immediateContext->ClearState();
Memory::SafeRelease(renderTargetView);
Memory::SafeRelease(immediateContext);
Memory::SafeRelease(swapChain);
Memory::SafeRelease(device);

Memory::SafeRelease(vertLayout);
Memory::SafeRelease(PSBuffer);
Memory::SafeRelease(VSBuffer);
Memory::SafeRelease(triangleVertBuffer);
Memory::SafeRelease(pixelShader);
Memory::SafeRelease(vertexShader);
}


int DXApp::Run() {

MSG msg = { 0 };
while (WM_QUIT != msg.message) {
    if (PeekMessage(&msg, NULL, NULL, NULL, PM_REMOVE)) {
        TranslateMessage(&msg);
        DispatchMessage(&msg);
    }
    else {
        Update(0.0f);

        Render(0.0f);
    }
}
return static_cast<int>(msg.wParam);
}

bool DXApp::Init()
{
if (!windowInit()) {
    return false;
}

if (!direct3dInit()) {
    return false;
}

return true;
}

bool DXApp::windowInit()
{
WNDCLASSEX wcex;
ZeroMemory(&wcex, sizeof(WNDCLASSEX));

wcex.cbClsExtra = 0;
wcex.cbWndExtra = 0;
wcex.cbSize = sizeof(WNDCLASSEX);
wcex.style = CS_HREDRAW | CS_VREDRAW;
wcex.hInstance = hAppInstance;
wcex.lpfnWndProc = MainWndProc;
wcex.hIcon = LoadIcon(NULL, IDI_APPLICATION);
wcex.hCursor = LoadCursor(NULL, IDC_ARROW);
wcex.hbrBackground = (HBRUSH)GetStockObject(NULL_BRUSH);
wcex.lpszMenuName = NULL;
wcex.lpszClassName = "DXAPPWNDCLASS";
wcex.hIconSm = LoadIcon(NULL, IDI_APPLICATION);

if (!RegisterClassEx(&wcex)) {
    OutputDebugString("\nFAILED TO CREATE WINDOW CLASS!!\n");
    return false;
}

RECT r = { 0, 0, ClientWidth, ClientHeight };
AdjustWindowRect(&r, WindStyle, false);

unsigned int width = r.right - r.left;
unsigned int height = r.bottom - r.top;

unsigned int x = GetSystemMetrics(SM_CXSCREEN) / 2 - width / 2;
unsigned int y = GetSystemMetrics(SM_CYSCREEN) / 2 - height / 2;

hAppWnd = CreateWindow("DXAPPWNDCLASS", AppTitle.c_str(), WindStyle, x, y, width, height, NULL, NULL, hAppInstance, NULL);
if (!hAppWnd) {
    OutputDebugString("\nFAILED TO CREATE WINDOW!!\n");
    return false;
}

ShowWindow(hAppWnd, SW_SHOW);
return true;
}

//DIRECTX INITIALIZATION

bool DXApp::direct3dInit()
{
unsigned int createDeviceFlags = 0;

#ifdef DEBUG
createDeviceFlags |= D3D11_CREATE_DEVICE_DEBUG;
#endif // DEBUG

D3D_DRIVER_TYPE driverTypes[] = {

    D3D_DRIVER_TYPE_HARDWARE,
    D3D_DRIVER_TYPE_WARP,
    D3D_DRIVER_TYPE_REFERENCE
};

unsigned int numDriverTypes = ARRAYSIZE(driverTypes);

D3D_FEATURE_LEVEL featureLevels[] = {

    D3D_FEATURE_LEVEL_11_0,
    D3D_FEATURE_LEVEL_10_1,
    D3D_FEATURE_LEVEL_10_0,
    D3D_FEATURE_LEVEL_9_3
};

unsigned int numFeatureLevels = ARRAYSIZE(featureLevels);

DXGI_SWAP_CHAIN_DESC swapDesc;
ZeroMemory(&swapDesc, sizeof(DXGI_SWAP_CHAIN_DESC));

swapDesc.BufferCount = 1;
swapDesc.BufferDesc.Width = ClientWidth;
swapDesc.BufferDesc.Height = ClientHeight;
swapDesc.BufferDesc.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
swapDesc.BufferDesc.RefreshRate.Numerator = 60;
swapDesc.BufferDesc.RefreshRate.Denominator = 1;
swapDesc.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
swapDesc.OutputWindow = hAppWnd;
swapDesc.SwapEffect = DXGI_SWAP_EFFECT_DISCARD;
swapDesc.Windowed = true;
swapDesc.SampleDesc.Count = 1;
swapDesc.SampleDesc.Quality = 0;
swapDesc.Flags = DXGI_SWAP_CHAIN_FLAG_ALLOW_MODE_SWITCH;

HRESULT result;
for (int i = 0; i < numDriverTypes; ++i) {
    result = D3D11CreateDeviceAndSwapChain(NULL, driverTypes[i], NULL, createDeviceFlags, featureLevels, numFeatureLevels, 
        D3D11_SDK_VERSION, &swapDesc, &swapChain, &device, &featureLevel, &immediateContext);

    if (SUCCEEDED(result)) {
        driverType = driverTypes[i];
        break;
    }

    if (FAILED(result)) {
        OutputDebugString("FAILED TO CREATE DX11 DEVICE!!");
        return false;
    }
}

//RENDER TARGET VIEW
ID3D11Texture2D* backBufferTex = 0;
swapChain->GetBuffer(NULL, __uuidof(ID3D11Texture2D), reinterpret_cast<void**>(&backBufferTex));
device->CreateRenderTargetView(backBufferTex, nullptr, &renderTargetView);

//BIND RENDER TARGET VIEW
immediateContext->OMSetRenderTargets(1, &renderTargetView, nullptr);

//COMPILE SHADERS FROM FILE
result = D3DCompileFromFile(L"VertexShader.hlsl", 0, 0, "vertexShader", "vs_4_0", 0, 0, &VSBuffer, &VSBuffer);
result = D3DCompileFromFile(L"PixelShader.hlsl", 0, 0, "pixelShader", "ps_4_0", 0, 0, &PSBuffer, &PSBuffer);

//CREATE SHADER OBJECTS
result = device->CreateVertexShader(VSBuffer->GetBufferPointer(), VSBuffer->GetBufferSize(), 0, &vertexShader);
result = device->CreatePixelShader(PSBuffer->GetBufferPointer(), PSBuffer->GetBufferSize(), 0, &pixelShader);

//SET SHADERS
immediateContext->VSSetShader(vertexShader, 0, 0);
immediateContext->PSSetShader(pixelShader, 0, 0);

//CREATE VERTEX BUFFER
Vertex v[] = {
    Vertex(0.0f, 0.5f, 0.5f),
    Vertex(0.5f, -0.5f, 0.5f),
    Vertex(-0.5f, 0.5f, 0.5f),
};

D3D11_BUFFER_DESC vertexBufferDesc;
ZeroMemory(&vertexBufferDesc, sizeof(D3D11_BUFFER_DESC));

vertexBufferDesc.Usage = D3D11_USAGE_DEFAULT;
vertexBufferDesc.ByteWidth = sizeof(Vertex) * 3;
vertexBufferDesc.BindFlags = D3D11_BIND_VERTEX_BUFFER;
vertexBufferDesc.CPUAccessFlags = 0;
vertexBufferDesc.MiscFlags = 0;

D3D11_SUBRESOURCE_DATA vertexBufferData;
ZeroMemory(&vertexBufferData, sizeof(vertexBufferData));
vertexBufferData.pSysMem = v;

result = device->CreateBuffer(&vertexBufferDesc, &vertexBufferData, &triangleVertBuffer);

//SET VERTEX BUFFER
unsigned int stride = sizeof(Vertex);
unsigned int offset = 0;
immediateContext->IAGetVertexBuffers(0, 1, &triangleVertBuffer, &stride, &offset);

//CREATE INPUT LAYOUT
device->CreateInputLayout(layout, numLayoutElements, VSBuffer->GetBufferPointer(), VSBuffer->GetBufferSize(), &vertLayout);

//SET INPUT LAYOUT
immediateContext->IASetInputLayout(vertLayout);

//SET PRIMITIVE TOPOLOGY
immediateContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);

//VIEWPORT CREATION
ZeroMemory(&viewport, sizeof(D3D11_VIEWPORT));

viewport.Width = static_cast<float>(ClientWidth);
viewport.Height = static_cast<float>(ClientHeight);
viewport.TopLeftX = 0;
viewport.TopLeftY = 0;
viewport.MinDepth = 0.0f;
viewport.MaxDepth = 1.0f;

//SET VIEWPORT
immediateContext->RSSetViewports(1, &viewport);


return true;

}




//MESSAGES

LRESULT DXApp::MsgProc(HWND hwnd, unsigned int msg, WPARAM wParam, LPARAM lParam)
{
switch (msg) {
case WM_DESTROY:
    PostQuitMessage(0);
    return 0;
default:
    return DefWindowProc(hwnd, msg, wParam, lParam);

}
}

您可以在引导应用程序时指定相应的提供程序：

export class SharedService {
  currentPost:any;
}

有关详细信息，请参阅此链接：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

angular 2共享组件之间的数据

2 个答案: